揭开HTML面纱

前言：对于刚刚接触BS的我们来说，html是打开BS大门的第一把钥匙，由此可见html的重要性。那么我们就来看一看到底什么是html，以及html的相关常用标签。

一.什么是html

html：是用来描述网页的一种语言，是超文本标记语言。简单来说就是通过一些标记标签来书写网页，而html标签所搭建的是整个网页的结构骨架。

二.html标签

html是由一个个标签组成的，那到底什么是标签。

标签结构：<开始标签>内容</结束标签>

1.几种常用标签种类：

（1）标题标签(双标签)：

<h1>一级标题</h1>  ....... <h6>六级标题</h6>

h1-h6字体逐渐变小

注意：h1主要用于logo和新闻标题

（2）段落标签（双标签）：

<p>这里是段落文字</p>

（3）换行标签（单标签）：

     <br>

（4）图片标签（单标签）：

    <img>

这里主要是强调一下<img>标签的常用属性：

src=目标图片路径；alt：当图片显示失败的时候显示的文本

title：鼠标放到图片上显示的文本；

width：设置图片宽度 ，height：设置图片高度

扩展：图片路径：分为相对路径和绝对路径

1.相对路径种类：

        同级路径：图片和文件都在一个文件夹里./

        下一级路径：图片在文件夹里边 ,文件在图片文件夹的外面 ./

        上级路径：图片和文件都在各自的文件夹里 ../

2.绝对路径：具体的图片路径D:\百度\图片\1.jpeg

（5）超链接标签（双标签）

<a href="./目标网页.html"  target="_blank">超链接</a>

_blank: 在新窗口跳转

（6）列表标签（双标签）

1>无序标签 (重点)

<ul>

        <li></li>

</ul>

注意点：ul只能包含li，li可包含任何标签

2>有序标签：ol，li格式跟无序一样

3>自定义标签：

<dl>

        <dt></dt>

        <dd></dd>

</dl>

dl表示自定义列表的整体；dt表示列表主题，dd表示主题中每一项内容

（7）表格标签：

<table>  /表格整体

        <tr>  /表格每行

                <td></td>

                <td></td>    /表格单元格内容

        </tr>

</table>

（8）表单标签（重点）

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

1>input标签：

<input type =“text”>

radio单选框

属性：name：有相同name属性的单选框为一组，一组中同时只能有一个被选中

checked：默认选中

checkbox复选框

属性：checked：默认选中

file文件选择

属性：multipe ：多文件选择

2>button标签

type属性值：

3>select下拉菜单

组成：select标签：下拉菜单的整体

option标签：下拉菜单的每一项

属性：selected：下拉菜单的默认选中

4>textarea文本域

属性：cols：规定了文本域可见宽度

rows：规定了文本域可见行数

5>lable标签

使用方法：

例子：

 三.head标签

在head标签中可以包含所有的头部标签元素。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

1.<style></style>

在head标签中可以直接添加样式来渲染页面，也可以定义HTML文档的样式文件引用地址

2.<title></title>

定义不同文档的标题：

• 定义了浏览器工具栏的标题
• 当网页添加到收藏夹时，显示在收藏夹中的标题
• 显示在搜索引擎结果页面的标题

3.<base>

描述了基本的链接地址/链接目标，规定页面的所有打开方式

<base href="http://www.runoob.com/images/" target="_blank">

4.<link>

link标签通常用于链接到样式表

<link rel="stylesheet" type="text/css" href="mystyle.css">

四.文本格式化

文本格式化就是对文本进行加粗，倾斜等相关操作

文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文本
<i>	定义倾斜文本
<small>	定义小号文本
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

总结：这里我们了解了什么是html，以及html的相关标签，html就是通过使用一些格式化文本，插入图片，以及定义一些属性将内容呈现出来，搭起框架接下来就是通过css来进行美化加工，后面有关html的内容也会更新到此博客哦。