文章目录
1、排版标签
1)标题标签
单词缩写: head,头部、标题。
在HTML中为了使网页更具语义化,一共提供了6等级的标签,及<h1>....<h6>
基本语法格式: <hn> 标题文本 </hn>
其中一级标题h1主要给logo使用。
2)段落标签
单词缩写:paragraph ,段落
用于在网页中将文字有条理的的进行排版,分段之后使得文档结构清晰,层次分明。
基本语法格式:<p> 文档内容 </p>
2)水平线标签
单词缩写:horizontal 横线
用于在网页中分割内容,在网页显示默认样式的横线。
基本语法:<hr /> //这是一个单标签
4)换行标签
单词缩写: break 打断、换行
基本语法:<br /> 换行文本
5)div span标签
div span标签没有具体的语义
div 就是division的缩写 分割,分区的意思,大多数时候用来组合网页
span 跨度,范围
基本语法: <div> hello </div> <span> wold </span>
2、文本格式化标签
<b>定义粗体</b> = <strong> 强调加粗 </strong>
<i>定义斜体</i> = <em> 强调倾斜</em>
<u>定义下划线</u> = <ins> 强调加入下划线 </ins>
rtui<del>定义删除线</del>
<sup>定义上标</sup>
<sub>定义下标</sub>
3、标签属性
属性既是特性,HTML在制作网页时,如果想让HTML标签提供更多的信息,可以设置相关属性。
- 一个标签可以有多个属性,必须写在开始标签之中,位于标签名后面。
- 数值之间不分先后顺序,标签名与属性、属性与属性之间均用空格隔开。
基本语法: <标签名 属性1=“属性值1” 属性2=“属性值2”..> 内容 </标签名>
eg:<hr width="500" color="black" />
4、图像标签
单词缩写:image 图像
<!--1、基本图像插入-->
<img src="img.jpg"/>
<!--2、带有alt的图像-->
<img src="img.jpg" alt="这是一张图片"/>
<!--、带有title的图像-->
<img src="img.jpg" title="这是图片title" />
5、链接标签
单词缩写: anchor的缩写。基本解释为 锚,铁锚的
咋HTML中使用简单,只需要使用标签焕然链接对象即可
基本语法格式如下:
<a herf="跳转目标" target="目标窗口的弹出方式" > 文本或图像 </a>
- herf:用于指定连接目标的URL地址,当应用了herf属性时,该链接就是一个超连接。
- target:用于指定链接页面的打开方式其取值有两种,self为默认打开方式,blank为在新窗口中打开。
注:
- 外部链接需要加上
http://www.baidu.com
- 内部链接则直接连接内部页面名称即可,如:
<a herf="index.html">首页</a>
- 如果没有明确连接目标时则使用“#”定义herf属性值即可
6、锚点定位
通过创建锚点,通过链接跳转到锚点位置。
实现步骤:
- 创建链接:
- 创建锚点
eg:
<a herf="#锚点1"> 我的锚点1 <\a> <!--创建链接 -->
<h3 id="锚点1"> 我的标题 </h3> <!--创建锚点-->
7、特殊字符转换
8、列表标签
列表是最大特点是整洁有序。
列表分为无序列表、有序列表和自定义列表。
无序列表基本语法如下:
<ul> <!-- <ul>标签中只能放<li>标签-->
<li>列表项1</li> <!-- <li>标签中能放其他标签-->
<li>列表项2</li>
.....
</ul>
有序列表基本语法如下:
<ol> <!--同样的只能存放<li>标签-->
<li>有序项1</li>
<li>有序项2</li>
......
</ol>
9、表格table
1)创建表格
在HTML中创建表格,其基本语法如下:
<table> <!--创建一个表格-->
<th> <!--定义一个表头-->
<td> 单元格内容</td>
.....
</th>
<tr> <!--定义一行-->
<td>第一列内容</td> <!--定义一行里一列的内容-->
<td>第二列内容</td>
......
</tr>
......
</table>
2)表格属性
属性名 | 含义 | 常用属性值 |
---|---|---|
boder | 设置边框 | 像素值 |
width | 设置表格宽度 | 像素值 |
height | 设置表格高度 | 像素值 |
align | 设置表格在网页中的水平对其方式 | left,center,right |
cellspacing | 设置单元格与边框之间的距离 | 像素值,默认为2 |
cellpadding | 设置单元格边框与文字内容之间的距离 | 像素值,默认为1 |
3)合并单元格
跨行合并:rowspan
跨列合并: colspan
合并思想:在将多个内容合并时,就会有多余的东西,需要把他删除。
删除的个数=合并的个数-1
10、表单标签
1)input控件
input 标签为单标签,type属性为其最基本的属性,其取值有多种,处理type属性织袜,input标签还有一些其他属性。
eg:
用户名:<input type="text" maxlength=10 /> <!--这是一个文本框,最大输入长度为10-->
密 码:<input type="password"/> <!--这是一个密码框-->
性 别:<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<!--这是一个sex单选框-->
爱 好:<input type="checkbox"/>足球<input type="checkbox"/>篮球 <!--这是一个复选框-->
上传头像:<input type="file"/> <!--文件域-->
2)label控件
label标签为input元素定义标注
作用:用于绑定一个表单元素,当点击label标签时,被绑定的元素就会获得一个输入焦点。
for属性规定label标签与哪个元素绑定。
eg:
<label for="male">Male</label>
<input type="text" id="male" >
or:
<label> 输入账号:<input type="text"/></label>
3)textarea控件
文本域控件,当需要输入大量信息时,可使用文本域输入信息。
eg:
<textarea>请输入留言:</textarea>
4)下拉菜单
使用select控件定义下拉菜单的基本语法格式如下:
<select>
<option>选项一</option>
<option>选项二</option>
..........
</select>
注:
- select标签中必须包含至少一对option标签。
- 在option标签中定义selected=“selected”时,该选项就为默认选项
5)表单域
在HTML中,form标签被用于定义一个表单域,及创建一个表单,以实现用户信息的收集。form中的内容都会提交给服务器。
创建表单的基本语法如下:
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
......
</form>