html的常用标签
程序员文章站
2022-07-01 14:49:13
标签：又称为标记 双闭合标签 示例：`` 单闭合标签 示例：`` 一、head标签 1. title标签：显示网站的标题 2. meta标签：提供有关页面的元信息 3. style标签：定义内部样式表 4. link标签：链接css资源文件、网站图标 5. script标签：链接脚本js文件 二、 ......
标签：又称为标记
- 双闭合标签
- 示例：
<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>
上一篇： C#多线程编程系列（三）- 线程同步