htmlbasic

1. body中常用标签

• 文本标签

  • 标题标签：自带加粗效果，从h1到h6字体大小逐级递减

   <h1>一级标题</h1>
   <h2>二级标题</h2>
   <h3>三级标题</h3>
   <h4>四级标题</h4>
   <h5>五级标题</h5>
   <h6>六级标题</h6>
  

  • 段落标签：

  <p>段落文本</p>
  

  • 普通文本标签：

  <span>行分区标签，用于对特殊文本特殊处理</span>
  <b>加粗标签</b>
  <strong>强调标签，效果同b标签</strong>
  <label>普通文本标签，常与表单控件结合实现文本与控件的绑定</label>
  <i>斜体标签</i>
  <u>删除线标签</u>
  

  • 格式标签： 浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。

  <br>
  

  • 水平线标签，在页面中插入一条水平分割线

  <hr>
  

  • 字符实体： 某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写 例：

   使用 &lt; 在页面中呈现 "<"
   使用 &gt; 在页面中呈现 ">"
   使用 &nbsp; 在页面中呈现一个空格
   使用 &copy; 在页面中呈现版权符号"©"
   使用 &yen; 在页面中呈现人民币符号"￥"
  

• 容器标签 常用于页面结构划分，结合CSS实现网页布局

  <div id="top">页面顶部区域</div>
  <div id="main">页面主体区域</div>
  <div id="bottom">页面底部区域</div>
  

• 图片与超链接标签

  • 图片标签 ：用于在网页中插入一张图片。

    1. 属性 src 用于给出图片的URL，必填。
    2. 属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
    3. 属性 title 用于设置图片标题，鼠标悬停在图片上时显示
    4. 属性 alt 用于设置图片加载失败后的提示文本

    语法：

  <img src="" width="" height="" title="" alt="">
  

  • 超链接标签：用户可以点击超链接实现跳转至其他页面
    1. 属性 href 用于设置目标文件的URL，必填。
    2. 属性 target用于设置目标文件的打开方式，默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")

  <a href="http://www.taobao.com" target="_self">淘宝</a>
  <a href="http://www.baidu.com" target="_blank">百度</a>
  

2. 常用结构标签

• 列表标签

  • 有序列表（ordered list） 默认使用阿拉伯数字标识每条数据

  <ol>
     <li>list item 列表项</li> 
     <li>list item 列表项</li>
     <li>list item 列表项</li>
  </ol>
  

  • 无序列表（unordered list） 默认使用实心圆点标识列表项

  <ul>
   	<li>list item 列表项</li> 
   	<li>list item 列表项</li>
   	<li>list item 列表项</li>
   </ul>
  

  • 列表嵌套 在已有列表中嵌套添加另一个列表，常见于下拉菜单

  <ol>
     <li>
     	西游记
     	<ul>
     		<li>孙悟空</li>
     		<li>孙悟空</li>
     		<li>孙悟空</li>
     	</ul>
     </li>
  </ol>
  

• 表格标签

  • 表格由行和单元格组成，常用于直接的数据展示或辅助排版,基本结构如下

  <!-- 创建表格标签 -->
  <table>
  	 <!-- 创建行标签 -->
  	<tr>
  		<!-- 行中创建单元格以显示数据 -->
  		<td>姓名</td>
  		<td>年龄</td>
  		<td>班级</td>
  	</tr>
  	<tr>
  		<td>迪丽热巴</td>
  		<td>20</td>
  		<td>002</td>
  	</tr>
  </table>
  

  • 单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整

    单元格属性	作用	取值
    colspan	跨列合并单元格	无单位数值
    rowspan	跨行合并单元格	无单位数值

  • 行分组标签：可以将表格中的若干行划分为一组，表示表头，表尾及表格主体，默认在表格中创建的所有行都会被自动加入表格主体中

  <table border="1px" width="300px" height="300px">
      <thead></thead>
      <tfoot></tfoot>
      <tbody></tbody>
  </table>
  

• 表单标签 表单用于采集用户的信息并提交给服务器，由表单元素和表单控件组成。表单元素form负责提交数据给服务器，表单控件负责收集数据。 | 表单使用

  属性名	取值
  action	设置数据的提交地址
  method	设置数据的提交方式，默认为get方式，可以设置为post
  enctype	设置数据的编码类型，涉及二进制数据提交（例如图片，文件，音视频等），必须设置数据的提交方式为post,编码类型为"multipart/form-data"

  例如：

  <form action="" method="" enctype="">
  	<!--此处为表单控件-->
  </form>
  

  • 表单控件使用（重点） 表单控件用于采集用户信息，可设置以下标签属性

  属性名	取值
  type	设置控件类型
  name	设置控件名称，最终与值一并发送给服务器
  value	设置控件的值
  placeholder	设置输入框中的提示文本
  maxlength	设置输入框中可输入的最大字符数
  checked	设置单选按钮或复选按钮的默认选中
  selected	设置下拉菜单的默认选中