HTML学习

HTML

浏览器调试工具：右键点“检查”，或按F12

常用标签

标题标签 ： < h1 > ~ < h6 >

段落标签：< p > < /p > (两段之间会插入一定的间距)

换行标签：< br >

水平分割线：< hr >

文本格式化标签：

• 加粗：< strong >< /strong >或者 < b >< /b >
• 倾斜：< em >< /em > 或者 < i >< /i >
• 删除线：< del >< /del > 或者 < s >< /s >
• 下划线：< ins >< /ins > 或者 < u >< /u >

分区标签：

• < div > < /div > ：一行只能放一个 < div > ，是大分区；
• < span > < /span > ：一行可以放多个 < span >，是小分区；

其他布局标签：（用于手机网页制作）

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

图像标签：

• < img src=“图像URL” / >

• < img src=“图像URL” alt=“替换的文字” title=“图像提示文字”/ >

  图像标签的属性：

  属性之间不分先后顺序，但必须用空格分开

  属性采用键值对的格式：key=“value”

  属性	属性值	说明
  src	图片路径	必须属性
  alt	文本	替换文本，图像不能显示时出现的文字
  title	文本	提示文本，鼠标放到图像上会浮现的文字
  width	像素	设置图像的宽度
  height	像素	设置图像的高度
  border	像素	设置图像的边框粗细

相对路径： / 指下一级路径， …/ 指上一级路径

绝对路径：\

<!-- 注意最后应该有个斜杠/，以表示是目录 -->
<base href="http://localhost:8080/07_servlet/a/b/">

base标签：可以设置当前页面中所有路径工作时，参照哪个路径来进行跳转。

超链接：< a > 具体为：< a href=“跳转目标” target=“目标窗口的弹出方式” > 文本、图像、音频等(点击样式) < /a>

属性	作用
href	用于指定链接目标的url地址（必须属性）
target	用于指定链接页面的打开方式，_self为默认值， _blank为在新窗口打开

如：< a href=“http://www.qq.com” target=“_blank”> 腾讯< /a >

内部链接：则href 后可以直接写相对路径。即两者在同一文件夹。

空链接：href 后写个 # ，即 < a href=“#”> ** < /a >

下载链接：href后写压缩文件的路径

锚点链接：在href属性中，设为 #名字 的形式，如 < a href=“#ZZC”> 哈哈 < /a >，然后在目标处，添加一个id属性=设定的名字，如 < h4 id=“ZZC” >

---

注释： < !-- 注释语句 – > ，快捷键 ：ctrl + /

特殊字符：（只记空格符就行，所有字符后都要带个分号 ; )

特殊字符	描述	字符的代码
	空格符	&nbsp
<	小于号	&lt
>	大于号	&gt
&	和号	&amp
￥	人民币	&yen
©	版权	&copy
®	注册商标	&reg
°	摄氏度	&deg
±	正负号	&plusmn
×	乘号	&times
÷	除号	&divide
²	平方2	&sup2
³	立方3	&sup3

---

---

表格标签

< table>< /table>：是用于定义表格的标签

< tr >< /tr >：用于定义表格中的行，必须在< table >中

< td >< /td >：用于单元格，必须嵌套在< tr >中

< th >< /th >：表示表头单元格（文本内容居中加粗）

表格结构标签：< thead >指表格的头部区域，<tbody>指表格 的主体区域。

合并单元格（属性）：跨行合并——rowspan=”合并个数“，跨列合并——colspan=“合并个数”（也可说是占了若干个单元格）

合并步骤：找到目标单元格，写上合并方式，如：< td colspan=“2” >< /td >，然后再删除多余的单元格。

表格属性：

属性	属性值	描述
align	legt，center，right	规定表格相对周围元素的对齐方式
border	1或 ” “	是否有边框，默认为” “，即无边框
cellpadding	像素值	规定单元边沿与内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认1像素
width	像素值或百分比	规定表格的宽度

如：

<table align="center" border="1" cellpadding="0">
	<tr>
    	< th>表头单元格的内容</th>
		< td>单元格中的内容</td>
	</tr>
</table>

---

---

列表

无序列表：< ul > ，列表项：< li >

有序列表：< ol >

自定义列表：< dl > ，表项头< dt >，表项：< dd >

< ul >和< ol >里只能放< li >， < li >里面可以放任意标签，< dl >里只能放< dt >和< dd >。

---

表单

表单域（区域）：< form >

<form action="url地址" method="提交方式" name="名称">

表单域属性：

属性	属性值	作用
action	url地址	指定接收该表的服务器程序的url地址
method	GET/POST	设置表单数据的提交方式
name	名称	指定表单名称

表单元素：

• 输入元素：< input type=“属性值” / >

  input属性：

  属性	属性值	描述
  name	自定义	定义input元素的名称
  value	自定义	规定input元素的值
  checked	checked	规定此input首次加载时被选中
  maxlength	正整数	规定输入字符的最大长度

  注：name和value是每个表单元素都有的属性值，主要给后台人员使用；要求单选按钮和复选框要有相同的name值。

  type属性值：

  属性	描述
  button	定义可点击按钮（多数情况下，用于通过 Javascript启动脚本）
  checkbox	定义复选框。
  file	定义输入字段和“浏览"按钮，供文件上传。和 multiple 搭配可以上传多个文件
  hidden	定义隐藏的输入字段。
  image	定义图像形式的提交按钮
  password	定义密码字段。该字段中的字符被掩码。
  radio	定义单选按钮
  reset	定义重置按钮。重置按钮会清除表单中的所有数据
  submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
  text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。
  placeholder	占位符，作提示，常用于需要输入的文本框

  < label > ：用于绑定一个表单元素，当单击此标签内的文本时，会自动选择对应的表单元素，以增加用户体验。

  格式：< label >里的for属性 应该与相关元素的 id属性相同。如：

  <label for="zzc"> 文本</label> 
  <input type=" " id="zzc"/>
  

• 下拉元素：< select > ：定义下拉列表

  在< option >中添加selected=”selected”时，为默认选中项

  <select>
      <option> 选项 </option>
  </select>
  

• 文本域元素：< textarea >：定义多行文本输入控件

<textarea>
	文本内容
</textarea>