html基本标签

标签的用途:我们学习网页制作时,常常会听到一个词,语义化。那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等。

讲了这么多语义化,但是语义化可以给我们带来什么样的好处呢?

1. 更容易被搜索引擎收录。

2. 更容易让屏幕阅读器读出网页内容。

 

<body> 网页上显示的内容

<p> 段落标签,段前段后有空白

<hx> 标题,一共有六级标题,h1级别最高

<strong>和<em> em表示强调,strong表示更强烈的强调,默认em是斜体,strong是粗体

<span> 这个标签没有语义,为了给内容添加单独样式

<q> 短文本引用,默认带双引号,语义是引用别人的话

<blockquote> 长文本引用,默认前后缩进

<br> 换行,xhtml1.0写法<br />,html4.01写法<br>

&nbsp 空格

<hr> 水平横线,xhtml1.0写法<hr />,html4.01写法<hr>

<address> 地址,默认样式为斜体

<code> 单行程序代码

<pre> 多行程序代码,会保留空格和回车

<ul>和<li> 无序列表,默认li前面都带小圆点

<ol>和<li> 有序列表,默认li序号从1开始

<div> 划分网页中独立逻辑部分,相当于一个容器

<table> 表格标签。其中含有<tbody>,<tr>,<th>,<td>。加了tbody后,表格内容全部下载完才会显示。tr,表格的一行。td,表格的一个单元格,有几个td就有几列。th,表头单元格。默认表格没有表格线,表头是粗体且居中

<caption> 添加表格标题

<summary> 添加表格摘要,浏览器不会显示,用途是增加表格语义性

<a> 超链接,href属性是目标网址,title属性是鼠标滑过超链接时显示的文本,增加语义性,属性target="_blank"可以在新的标签页打开超链接,默认超链接是蓝色。href="mailto:[email protected]"将链接Email地址

<img> 图片标签,src标识图像的位置,alt当图片显示不成功是鼠标滑过图片显示的文本,title鼠标滑过时显示的文本

<form> 表单标签。method是数据传送方式get/post,action的值是服务器文件

<input> type="text"时,输入框为文本输入框,type="password"时,输入框为密码输入框。name为输入框命名,value为输入框默认值

<textarea> 文本域,多行文本输入,rows输入域的行数,cols输入域的列数,rows和cols可以用css的width和height代替

<input> type="radio"时是单选框,type="checkbox"时是复选框。name为控件命名,value是提交到服务器的值,当checked="checked"时,选项被默认选中。同一组的单选按钮的name必须一致,才能起到单选的作用

<select>和<option> 下拉列表框,其内的option标签是下拉列表框的选项,option的value属性是向服务器提交的值,当checked="checked"时,选项被默认选中。select标签的属性multiple="multiple"时,下拉列表框变为多选

<input> type="submit"时,是提交按钮,value是按钮上显示的文字。type="reset"时,是重置按钮

<label> label标签不会向用户呈现任何特殊效果,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。for属性的值要和相关控件的id属性相同

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。