Html标签

最新推荐文章于 2024-10-01 23:23:32 发布

自在随心小道名也

最新推荐文章于 2024-10-01 23:23:32 发布

阅读量207

点赞数

文章标签： html标签

本文链接：https://blog.csdn.net/Mrs_gui/article/details/87821937

版权

HTML文件有自己的基本结构：

<html>
    <head>
       <!--头部 -->
    </head>
    <body>
       <!--主体 -->
    </body>
</html>

HTML标签汇总：

1、<html></html> 称为根标签，所有的网页标签都在<html></html>中，如果没有加这个标签有些浏览器不允许。

2、<head></head> 标签用于定义文档的头部。

3、<body></body> 标签之间的内容是页面的主体，包含网页上要显示的内容。

4、<title>标题</title> 为页面指定一个标题，它会出现在浏览器的标题栏中。

5、<p>段落文本</p > 把文章的段落放到<p>标签中。

6、<h1>一级标题</h1> 标题一共有6级，从<h1>到<h6>，字体由大到小，标题标签的样式都会加粗。

7、<em>需要强调的文本</em> <em> 表示强调，默认用斜体表示；

<strong>需要强调的文本</strong> <strong> 表示更强烈的强调，默认用粗体表示。

8、<span>文本</span> <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

<html>
<head>
<title>如梦令</title>
<style>
span{
    color:blue;
}
</style>
</head>
<body>
    <p>昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。<span>知否，知否？</span>应是绿肥红瘦。</p>
</body>
</html>

9、<q>引用文本</q> 引用简短文本，浏览器会自动加双引号；

<blockquote>引用文本</blockquote> 引用长文本，浏览器对引用内容进行缩进。

10、在html代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<br />；想输入空格，就必须输入 。

11、<hr /> 添加水平横线，在浏览器中的默认样式线条比较粗，颜色为灰色。

12、<address>联系地址信息</address> 定义联系地址信息，也可以定义一个电子邮件地址、签名或者文档的作者身份，默认用斜体表示。

13、<code>代码语言</code> 定义一行代码语言；

<pre>语言代码段</pre> <pre>标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符，可以用来展示大段源代码。

14、ul-li 是没有前后顺序的信息列表，默认每项自带一个小圆点；

<ul>
    <li>昨夜雨疏风骤，<span></span></li>
    <li>浓睡不消残酒。</li>
    <li>试问卷帘人，</li>
    <li>却道海棠依旧。</li>
    <li>知否，知否？</li>
    <li>应是绿肥红瘦。</li>
</ul>

ol-li 是有前后顺序的信息列表，每项都自带一个序号，默认从1开始。

<ol>
    <li>昨夜雨疏风骤，<span></span></li>
    <li>浓睡不消残酒。</li>
    <li>试问卷帘人，</li>
    <li>却道海棠依旧。</li>
    <li>知否，知否？</li>
    <li>应是绿肥红瘦。</li>
</ol>

15、<div id="版块名称">独立板块</div> 可以把一些独立的逻辑部分划分出来，用id属性提供唯一的名称。

16、<table>表格</table> 整个表格以<table>标记开始、</table>标记结束；

<thead><tbody><tfooter> 分别标注表格的题头、主体和脚注；可以只用<tbody>，如果有<thead>或<tfooter>,就必须要<tbody>，规范用法的顺序是<thead>、<tfooter>、<tbody>可以在浏览很长的表格时，固定表头和表尾不动；

<tr>行</tr> 表格的一行；

<td>一格</td> 表格的一个单元格，一行中包含几对就有几列；

<th>表头</th> 表格的头部的一个单元格，表格表头，默认黑体居中显示；

<table summary="表格摘要"> 表格的摘要；

<caption>表格标题</caption> 表格的标题，默认显示在表格上方。

17、<a href="目标网址" title="鼠标滑过显示的文本" target="_blank">链接显示的文本</a> 可以实现超链接，只要为文本加入<a>标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色）；

title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容；

<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，我们可以使用target="_blank"在新的浏览器窗口中打开链接。

18、<a href="mailto:收件人邮箱地址?cc=抄送地址&bcc=密件抄送地址&subject=邮件主题&body=邮件内容">链接显示的文本</a> <a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件；

如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔；

多个邮箱地址时用分号隔开；mailto后面是：不是=。

19、<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> 插入图片；src标识图像的位置； alt指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；title提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；图像可以是GIF，PNG，JPEG格式的图像文件。

20、<form method="传送方式" action="服务器文件"> HTML表单(form)是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据;

所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间;

action是浏览者输入的数据被传送到的地方;

method是数据传送的方式（get/post）。

21、

<form>
   <label for="id">label标签</label>
   <input type="类型" name="名称" value="文本" />
</form>

type：当type="text"时，输入框为文本输入框;

当type="password"时, 输入框为密码输入框；

当type="radio" 时，控件为单选框，同一组的单选按钮，name 取值一定要一致；

当type="checkbox" 时，控件为复选框；

当type="submit"时，按钮有提交作用，value为按钮上显示的文字；

当type="reset"时，按钮有重置作用，value为按钮上显示的文字。

name：为控件命名，以备后台程序ASP 、PHP使用；

value：type为文本框时为文本输入框设置默认值，type为单选框和复选框时为提交数据到服务器的值。

type为单选框和复选框时，当设置 checked="checked" 时，该选项被默认选中

<textarea rows="行数" cols="列数">文本</textarea> 输入多行文本； cols ：多行输入域的列数；rows ：多行输入域的行数；在<textarea></textarea>标签之间可以输入默认值

<label for="控件id名称"> 标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

22、使用下拉列表可以有效的节省网页空间，既可以单选、又可以多选。

<select <!--multiple="multiple"-->>
    <option value="向服务器提交的值" selected="selected">显示的值</option>
</select>

在<select>标签中设置multiple="multiple"属性，就可以实现多选功能；

设置selected="selected"属性，则该选项就被默认选中。

自在随心小道名也

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫