html通俗简介,前端基础知识整理（html篇）

HTML是前端技术中基础的基础，虽然很简单，但是前端写的好坏区别在于是否充分理解了语义化。

语义化: 说的通俗点就是：明白每个标签的用途(在什么情况下使用此标签合理)比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。

语义化的好处：

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

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

以下为几个常见的语义化标签：

p 段落

hx 标题(x=1~6)

em 强调文本

srtong 更强烈的强调文本

q 短文本引用 引用的时候不需要加"",浏览器渲染后，会让被引用的短文本自动加上""

blockquote 长文本引用，浏览器渲染后，会让被引用的长文本自动加上缩进格式

用于换行，相当于word文档中的回车

添加空格

---

换行

address 地址标签

code 引用一行代码

pre 引用大段代码

img 引用图片

a标签

链接显示的文本

a标签着重注意的是以下两个属性：

1.title属性，title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容(语义化更友好)

2.target属性，当target="_blank"时，点击链接会在新的窗口打开链接。

关于a标签，大部分人都会觉得它的唯一作用是链接标签，但是它还有一个重要的作用是发送邮件，href属性里可以直接写上电子邮件，通过a标签直接链接到电子邮箱，例如：

对此影评有何感想，发送邮件给我

表单标签

值得注意的是以下2个属性：

1.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

2.method ： 数据传送的方式(get/post)

文本输入框

文本

text为文本输入框

password为密码输入框

输入框

单选复选框

1.type:

当 type="radio" 时，控件为单选框，同一组单选框，name一定要一致

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

2.value：提交数据到服务器的值(后台程序PHP使用)

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

4.checked：当设置 checked="checked" 时，该选项被默认选中

下拉列表

看书

旅游

运动

购物

````

select标签中 加入这个属性 multiple="multiple"表示可以多选的下拉列表，进行多选时按下Ctrl键同时进行单击

option标签中 selected="selected表示选项默认被选中

####提交重置按钮

``

只有当type为submit时，才是提交按钮，reset为重置按钮

####form表单中的label标签

``

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

值得注意的是：

span标签是没有任何语义的，他的作用仅仅是用来设置单独样式的