02-HTML基础标签

一、html常用标签

一、标签规则

• html不区分大小写，但一般小写

• 注释不能嵌套

• 标签结构必须完整，必须成对出现，除非是自动结束标签

• 标签可以嵌套，但不能交叉嵌套（标签需要合理嵌套）

• 标签的属性，必须有值。且值必须使用引号，双引号或单引号

二、常用标签

1、标题标签

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

2、段落标签

<p></p>

3、文本标签

1、加粗<b></b><strong></strong>
2、斜体<i></i>
3、斜体加粗<em></em>
4、下划线<u></u><ins></ins>
5、删除线<s></s><del></del>
6、下标<sub></sub>
7、上标<sup></sup>
8、减小<small></small>
9、预格式标签<pre></pre>
    - 会将页面中文本、代码、空格保留，进行原样显示
10、代码标签<code></code>
11、一般预格式标签与代码标签配合使用能显示代码块
<pre>
    <code>代码</code>
</pre>

4、图片标签

<img src="链接地址" title="鼠标放置图片上的提示信息"  alt="图片加载错误时显示的信息">

5、链接标签

      - 链接的href属性设置为：href=“mailto:邮件地址“就可以发送电子邮件链接

<a href="链接地址" target='_self/_blank(原窗口打开还是新窗口标签打开)'></a>

设置锚点
同一页面<a href="#id"></a>
不同页面<a href="另外一个页面的地址#另一个也买你指定定位的id名字">
<p id=""></p>

6、meta（变量）标签

设置网页的关键字，让搜素引擎收录当前网页的主题内容
​
编码格式：<meta name="charset"> 
关键字：<meta name="keyword" content="">
描述信息：<meta name="description" content="">
​

7、内联框架标签

• 在一个页面中引入另一个页面信息

• frameborder:设置边框，0表示无边框，1表示有边框

<iframe src="#" width="100px" height="200px" framborder="0" >

8、列表标签

通过ul标签的type属性可以设置列表项的符号
​
- 可选值：disc表示实心圆点（默认值），circle：空心圆，square:实心方块
list-style-type:disc/square/circle
list-style-image:url()
list-style-position:inside/outside(默认)
简写：list-style：

（1）无序列表

<ul type="circle">
    <li>历史故事会</li>
</ul>

（2）有序列表

- start属性表示起始值：a/A/i/I/1(阿拉伯数字（默认值1），英文的大小写（a或A）,大小写罗马数字（i或I）6)

<ol type="a" start="c">
    <li>猴子</li>
</ol>

（3）自定义列表

<dl>
    <dt>水果</dt>
    <dd>桃子</dd>
    <dd>苹果</dd>
    <dd>香蕉</dd>
</dl>

9、表格标签

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            //列合并，在本身那里删
            <td colspan='2'></td>
            <td></td>
        </tr>
        <tr>
            //行合并，在其他行那里删
            <td rowspan='3'></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
        
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

• 页面中使用table标签表示表格标签

• tr标签表示行

• td表示单元格

• 单元格标签必须设计在tr中， 也就是表格的列

• th表示表头，默认效果，黑体放大，th也必须放在tr当中 table的属性

• table标签

  • border：表格边框的宽度，可以理解为表格和单元格都添加边框（单元格之间的间距和表格之间的使用）

  • 后期学习css后就不推荐使用

  • table表格是制作前端常常需要使用到的一个标签，表格边框默认是不合并的，通过使用border-collapse:collapse可以对表格设置合并的边框效果。

  • cellspacing属性表示表格外边距，表示单元格之间的间距

  • cellpadding属性表示表格内边距，内容和边框的宽度，表示内容和单元格之间的间距

  • 经常将这两个属性设置为0

• table的属性

  • border

• 单元格合并

  • colspan：单元格的跨列（横向合并单元格）

  • rowspan：单元格的跨行（纵向合并单元格）

  • 都是td的属性

• 通过thead和tbody和tfoot三个标签来表示语义的区分

• 表格可以划分为三个区域

  • 表头、主体、底部

  • 这三个标签，只进行语法意思上的区分，默认没有显示效果

  • thead：表头，内容显示在表格的头部

  • tbody：主题，内容显示在表格的中间

  • tfoot:底部，内容显示在表格的地步

  • 着三个标签都是table的子标签

10、表单标签

• 由表单域、表单控件、提示信息三部分组成

• 作用：用来收集用户的信息，提交给服务器（B/S架构）

（1）表单域标签

• 向后台服务器提交数据的作用

• action属性：表示提交所发送的服务器地址（提交的服务器地址）

• method：表单提交的方式

• name:一个页面中不只有一个表单域，所以给他取名字

<form action="url()" method="get/post" name="">
    
</form>

（2）表单元素项目

• input：其中的一种表单项，type值不同，表单项的类型不同

• type取值：text,password,radio,checkbox,reset,submit,button,file,image,hidden

• name属性：服务器通过name的值来获取提交的信息

• value属性：在提交按钮中，value设置按钮显示的文本信息，在文本表单/密码表单中value设置文本框/密码框的默认值

• maxlength：正整数，规定输入字段中字符的最大长度

• 使用label标签可以实现文本和表单元素的绑定（扩大光标的选取位置），用于增加用户体验

<label for="值（需要绑定的表单元素的id值）"></label>
<input type="" name="" value=""  id="值">

• 属性=“属性值”的属性可以简写为属性。比如checked属性，selected属性，readonly属性，disabled属性

• radio为单选框，checkbox为复选框

• 复选框/单选框通过name的值进行分组，name值相同为一组，来实现复选/单选

（3）下拉表单元素

• 使用select标签创建下拉列表

• 使用option创建列表项

• 下拉列表的name属性指定select标签，value标签

• 下拉列表使用selected="selected"默认选中

• 使用multiple="multiple"属性设置多选

• 使用optgroup对option进行分组，label设置组名称

<select name="" id=""  multiple>
    <optgroup label="第一组">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4" selected>4</option>
    </optgroup>
    <optgroup label="第二组">
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
    </optgroup>    
</select>

（4）文本域标签

• textarea 标签表示文本域标签

• 使用textarea创建多行文本框（文本域）

• 属性

  • cols:设置列数（宽）

  • rows：行数（高）

  • resize：”none“控制文本域防止文本域拖拽放大缩小

  • outline:表单轮廓线

<textarea cols="" rows="" resize="none" outline="0/none"></textarea>

（5）按钮

• input创建重置按钮：type="reset";重置按钮会将表单恢复到默认

• 使用input创建普通按钮type="button"，这个按钮没有任何功能，需要通过添加js代码实现相应的功能

• 使用input创建图片按钮 type="image" src=""

• 属性src图片的路径，此刻图片就具有点击功能，点击后的功能有js代码实现

• 使用button标签创建按钮，默认具有提交功能

• 可通过type属性类型：submit、reset、button、menu

（6）、其他

• 使用filedset对表单项进行分组

• legend:指定分组名称(legent:n 传奇、说明)

• 有时候信息不想让用户看到但是又想要后端看到则把type类型改为hidden

  • 隐藏域使用input标签创建隐藏域，type="hidden"

  • 浏览器界面看不见，但服务器需要的信息

• 禁用:使用disabled="disabled"

• 只读：使用readonly="readonly"

11、无语义标签，只是用来布局的元素x

（1）div标签

（2）span标签