前端课程第3弹HTML3

1.HTML的注释标签（不需显示，只是帮助阅读理解）

注释以<!--开头，-->结束  快捷键：ctrl+/(这个反斜杠是问号那个键)

2.特殊字符

&nbsp 空格      &lt; 小于号     &gt;大于号

3.表格标签：表格主要作用：展示数据。

 <table>定义表格标签

        <tr>定义表格中的行

            <td>单元格内数字</td>定义表格中的单元格=table data

        </tr>

    </table>

（1）表头单元格标签：table head缩写th  表头单元格内容会加粗居中显示（通常位于表格第一行，突出重要性）tr th

（2）表格属性标签（这些属性要写到table中去<table    >）：

align:left right left 规定表格相对周围元素对齐方式

border:1或“” 规定表格单元是否有边框，默认“”没有标签

cellpadding 像素值  规定单元格边沿与其内容之间的空白，默认1像素

cellspacing 像素值 规定单元格之间的空白距离，默认2像素

width 像素值或百分比 规定表格的宽度

（3）表格结构标签:为了更好地表示表格的语义，将表格分割成表格头部（thead）和表格主体(tbody)两大部分

注：<thead></thead>:用于定义表格的头部，<thead>内部必须拥有<tr>标签，一般位于第一行

<tbody></tbody>:用于定义表格的主体，主要用于放数据本体

以上两个标签都是放在<table></table>中的

（4）合并单元格：

合并单元格方式：跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

目标单元格（写合并代码）：

跨行：最上侧单元格为目标单元格，写合并代码<td rowspan="2"></td>

跨列：最左侧单元格为目标单元格，写合并代码<td colspan="2"></td>

4.列表标签：列表是用来布局的，列表的最大特点：整齐、整洁、有序

列表分为无序列表、有序列表、自定义列表

（1）无序列表！！重点！！（无序，ul中只能放li标签，li中可以放任何元素）：

<ul>

        <li>列表项1</li>

        <li>列表项2</li>

        <li>列表项3</li>

 </ul>

（2）有序列表（ol中只能放li标签，li中可以放任何元素，样式属性一般用CSS设置）

<ol>

        <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

 </ol>

（3）自定义列表！！重点！！（常用于对术语或名词进行解释和描述）（dl中只能用dt、dd标签，dt和dd个数没有限制，经常是一个dt对应多个dd）

<dl>

        <dt>名词1</dt>

        <dd>名词1解释1</dd>

        <dd>名词1解释2</dd>

 </dl>

5.表单标签

表单？收集用户信息

组成：表单域、表单控件（表单元素）、提示信息

（1）表单域：包含表单元素的区域

<form>标签用于定义表单域，以实现用户信息的收集和传递

<form action="url地址（将表单元素的值提交给哪个服务器地址）" method="提交方式" name="表单域名称">

        各种表单元素控件

 </form>

（2）表单控件（表单元素）;是允许用户在表单中输入或者选择的内容控件（在form之间）

1）input输入表单元素 <input type="text;password;radio:checkbox" name="表单元素的名字" value='"规定input元素的值" checked="规定此input元素首次加载时应当被选中checked"  maxlength="规定输入字段中字符的最大长度" submit="定义提交按钮" reset="重置按钮" button="普通按钮" file="上传文件时使用">

text文本框 用户可以在里边输入任何文字；password密码框，用户看不见输入的密码；radio 单选按钮，可以实现多选一；checkbox 复选框，可以实现多选

注：要求单选按钮和复选框要有相同的name值

  label标签为input标签定义标注（标签）

label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将焦点转到或者选择对应的表单元素上，以增加用户体验。

 <label for="sex">男</label>

 <input type="radio" name="性别" id="sex">其中label的for属性应当与相关元素的id属性相同

2）select下拉表单元素

使用场景：如果有多个选项让用户选择，并且想要节约空间，可以使用select标签定义

<select name="" id="">

            <option value="">山东</option>

            <option value="">河北</option>

            <option value="">北京</option

 </select>

注：<select>中至少包含一对<option>；在<option>中定义selected="selected"时，当前项即为默认选项

3）textarea文本域元素

使用场景：当用户输入内容较多时使用

 <textarea rows="10" cols="50">pink老师,这个反馈部分是由textarea标签实现的</textarea>

注：其中文本域范围一般使用CSS实现的