HTML基础

来源：互联网发布：淘宝卖家如何加入村淘编辑：程序博客网时间：2024/05/21 04:25

html是Hyper Text Mark-up Language字母简写，意思是超文本标记语言

HTML基本结构

<!DOCTYPE html><!-- 告诉浏览器我是html页面 --><html lang="en">     <!--设置网页相关参数-->    <head>                    <meta charset="UTF-8"> <!-- 设置页面参数,设置编码处理中文乱码-->        <title>网页标题</title>    </head>    <body>          body里面包含的是网页显示内容    </body></html>

第一行是文档声明，第二行“html”标签和最后一行“/html”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是’lang=”zh-CN”’,不定义也没什么影响，它一般作为分析统计用。 “head”标签和“body”标签是它的第一层子元素，“head”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“body”内编写网页上显示的内容。

html文档规范
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)

html注释：

<!-- 这是一段注释  -->

html标签特点：
html的标签大部分是成对出现的，少量是单个出现的，特定标签之间可以相互嵌套，嵌套的意思是一个标签内可以保护一个或多个其它标签，包含的标签和父类的标签可以同类型的，也可以不同类型的。

<!-- 成对出现的标签  --><body>......</body><p>......</p><div>......</div><b>......</b><!-- 单个出现的标签  --><br /><img src="..." /><input type="..." /><!-- 标签之间的嵌套  --><p>    <span>...</span>    <a href="...">...</a></p><div>     <h3>...</h3>     <div>           <span>...</span>           <p>...</p>     </div></div>

字体效果列子

          <!--            hx标签：设置文字的题目，x:1到6            <hx align="设置对齐方式   left 左  right右  center中间">设置文字标题 </hx>          -->        标题        <h1 align="right">这是一级标题</h1>        <h2 align="center">这是二级标题</h2>        <h3>这是三级标题</h3>        <h4>这是四级标题</h4>        <h5>这是五级标题</h5>        <h6>这是六级标题</h6>        <!--            font标签:设置文字效果           <font size="1~7" color="设置字体颜色  单词/16进制" face="设置字体库  宋体 黑体 ">            设置文字内容           </font>          -->        <font size="7" color="#66AEFF">王宝强</font>        <font size="3" color="green">王宝强</font>        <font size="3" color="green" face="楷体">王宝强</font>        <!--            b标签:设置字体变粗            <b>                设置文字             </b>            strong标签：            设置字体变粗            <strong>                设置文字             </strong>            i标签:设置文字倾斜            <i>                设置文字             </i>        -->        <b>                b标签:设置字体变粗        </b>        <strong>            strong标签：设置字体变粗        </strong>        <i>                i标签:设置文字倾斜        </i>    </body>

html段落
<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开

<P></P>

html换行
末尾加<br/>即可

html字符实体

<!--  在段落前想缩进两个文字的空格，使用空格的字符实体：&nbsp;   --><p>&nbsp;&nbsp;一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>

在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  --><p>    3 &lt; 5 <br>    10 &gt; 5</p>

html链接

<a>标签可以在网页上定义一个链接地址，通过src属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。

<a href="#"></a> <!--  # 表示链接到页面顶部   --><a href="http://www.baidu.com/" title="跳转到百度">百度</a><a href="2.html">测试页面2</a>

定义页面内滚动跳转

<a href="#mao1">标题一</a>............<h3 id="mao1">跳转到的标题</h3>

html列表
有序列表
在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：

<ol>    <li>列表文字一</li>    <li>列表文字二</li>    <li>列表文字三</li></ol>

无序列表
在网页上定义一个无编号的内容列表可以用<ui>、<li>配合使用来实现，代码如下：

<ul>    <li>列表文字一</li>    <li>列表文字二</li>    <li>列表文字三</li></ul>

html表格
table常用标签

1、table标签：声明一个表格

2、tr标签：定义表格中的一行

3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
table常用属性：

1、border 定义表格的边框

2、cellpadding 定义单元格内内容与边框的距离

3、cellspacing 定义单元格与单元格之间的距离

4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right

5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

6、colspan 设置单元格水平合并

7、rowspan 设置单元格垂直合并
html表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，实现一个特定功能的表单区域（比如：注册），首先应该用<form>;标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入
html内嵌框架
<iframe>标签会创建包含另外一个html文件的内联框架（即行内框架），src属性来定义另一个html文件的引用地址，frameborder属性定义边框，scrolling属性定义是否有滚动条，代码如下：

<iframe src="http://www.baidu.com" frameborder="0" scrolling="no"></iframe>

阅读全文

1 0