标签:又称为标记
- 双闭合标签
- 示例:
<html></html>
- 示例:
- 单闭合标签
- 示例:
<meta charset="UTF-8">
- 示例:
一、head标签
- title标签:显示网站的标题
- meta标签:提供有关页面的元信息
- style标签:定义内部样式表
- link标签:链接css资源文件、网站图标
- script标签:链接脚本js文件
二、 body标签
2.1 标题标签
- h1~h6标题标签
- 示例:
<h1>标题</h1>
2.2 段落标签
- 又称p标签,每个段落都要用p标签包裹
- 示例:
<p>段落内容</p>
2.3 超链接标签
-
又称a标签
-
示例:
<a href = "网址">内容</a>
-
a属性:
- href:链接新网址,回到顶部,跳转邮箱,下载文件
- title:鼠标悬浮上的标题
- style:行内样式
- target:目标
- _self:默认值,在当前页面中打开新的链接
- _blank:在新的空白页面打开新的链接
-
如何清除a标签的下划线?
text-decoration: none; none;无线 underline:下划线 overline:上划线 line-through:删除线
2.4 图片标签
- 又称img标签
- 示例:
<img src = "图片地址" alt = "图片加载失败时显示的内容">
- img属性:
- src:图片的资源地址
- alt:图片加载失败时显示的标题
- title:鼠标悬浮时显示的标题
- width:设置图片的宽度
- height:设置图片的高度
2.5 字体标签
- 标题标签:h1~h6
- 粗体标签:
<b>
或<strong>
- 斜体标签:
<i>
或<em>
- 上标:
<sup>
- 下标:
<sub>
2.6 列表标签
- 无序列表:
<ul>
,无序列表中的每一项是<li>
- ul:unordered list
- li:list item(列表项)
- ul属性:type
- disc:实心圆点,默认
- square:实心方点
- circle:空心圆
- 设置为无序号:list-style:none;
- 有序列表:
<ol>
,里面的每一项是<li>
- ol:ordered list
- ol属性:type
- 1:阿拉伯数字,默认
- i
- I
2.7 表格标签
-
又称table标签
-
表格:
<table>
,表头:<th>
,行:<tr>
,列:<td>
-
table属性:
- border:边框
- cellspacing:单元格和单元格之间的距离(外边距)
- bordercolor:表格的边框颜色
-
简单示例:
<table border='1' cellspacing=0> <th> <td>id</td> <td>name</td> </th> <tr> <td>1</td> <td>mjj</td> </tr> </table>
2.8 表单标签
- 又称from标签
- from属性:
- action:定义表单被提交时发生的动作,提交给服务器处理程序的地址
- method:表单数据的提交方式,默认get,还有post
- get:明文提交,不安全,只能提交2kb信息,提交的内容会在地址上显示
- post:密文提交,安全,可以提交大量信息
- enctype:表单数据的编码方式(加密方式),只能在post方式下使用
- 输入标签(文本框):
<input>
- input属性:
- type:控件的类型
- text:单行文本输入框
- password:密码框
- radio:单选框
- 产生互斥效果:给每个单选按钮设置相同的name属性值
- 默认选中:给单选按钮添加checked属性
- checkbox:多选框
- 默认选中:添加checked属性
- submit:提交按钮
- file:上传文件
- datetime-local:时间
- name:控件的名称,提交到当前服务器的名称
- value:控件的值,提交到当前服务器的值
- type:控件的类型
- input属性:
- label标签:
<label>
,可以设置和input有绑定关系- 设置方式:input元素要有一个id,然后label标签有一个for属性,和id相同,那么label和input就有绑定关系了
- 下拉列表标签:
<select>
,里面的每一项用 - 多行文本输入框:
<textarea>
- textarea属性:
- cols:指定文本区域的列数
- rows:指定文本区域的行数
- textarea属性:
2.9 盒子标签
-
div标签:
<div>
,division,分割- 定义:把网页分割成不同的独立的逻辑区域,必须独占一行
- div属性:
- align:设置区域的位置,可选left,right,center
-
span标签:
<span>
- 定义:小区域标签,在不影响文本正常的情况下,单独设置对应的样式
- span和div的唯一区别:span是不换行的,div是换行的
<style> span.active{ font-weight:bold; } </style> <p> <span class='active'>央视网消息</span> </p>