HTML 基础

前端

什么是HTML？

HTML(HyperText MarkUp Language)超文本标记语言,通过使用标记来描述文档结构和表现形式的一种语言,由浏览器进行解析,然后把结果显示在网页上，通俗的讲它就是服务器发送的字符串到浏览器，通过浏览器能解析的规则用HTML来描述， 它是网页构成的基础,你见到的所有网页都离不开HTML,所以学习HTML是基础中的基础

  • HTML语言是一种标记语言,不需要编译,直接由浏览器执行
  • HTML文件是一个文本文件,包含了一些HTML元素, HTML文件是一个文本文件,包含了一些HTML元素,标签等.
  • HTML文件必须使用html或htm为文件名后缀
  • HTML是大小写不敏感的,HTML与html是一样的
  • html标签都是由<??></??>得形势存在的,<??>表示这个标签的开始</??>表示这个标签的结束,中间这是这个标签的内容.

Html和CSS、js的关系

如果把Html比作一个赤裸裸的人，那么css就是给这个人穿上华丽的服装，js就是可以把这个人动起来。

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现(外观控制)。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
知道了概念性的知识，下面来看看Html的组成部分；

第一个HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

Doctype

Doctype定义html解释标准,告诉浏览器使用什么样的html或xhtml规范来解析html文档，也就是用哪一种规则来将html变成用户看到的内容。

有和无的区别:

BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 – 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了，总之而言就是要告诉浏览器，你要用标准的规则来来解析html,而不是用自己浏览器的规则来解析html。

如下就是列举出来的部分解析html的规则。

Doctype

head部分

Meta(metadata information)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

1、页面编码

<meta charset="UTF-8">  #指定编码类型为UTF-8

2、刷新和跳转

<meta http-equiv="refresh" content="5">  #指定每5秒刷新一次
<meta http-equiv="refresh" Content="1;|Url=http://www.cnblogs.com/luotianshuai/" /> #指定1秒之后跳转页面至另一个网页

3、关键字

关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。

<meta name="keywords" content="卧槽 ,啪啪啪、 嘿嘿嘿, 爬我呀， 爬我呀" />

4、描述

例如cnblog里的就是一个描述：

<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

5、X-UA-Compatible

X-UA-Compatible 这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Title

网页头部信息

如：加上<title>test1</title>

效果：

Title

网页头部图标

如加上：

<link rel="shortcut icon" href="favicon.ico" />   #href是图片的路径+名字

效果：

Link

Style

  • 1、在当前文件中写Css样式
  • 2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用

导入CSS类似python中导入模块类似

<link rel="stylesheet" href="css/css_model.css" />

Script

  • 1、在当前文件中写JS
  • 2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用

可能细心的同学发现了,之前不是说所有标签都是<???></???>的形势形势吗?,但是也有只有一个的<??>就结束的了,这样浏览器在解析得时候认为这个标签没有结束是有问题的,不做解析或者解析报错吗?

这位同学问得非常好! 浏览器会很智能的把有错误的标签内容不解析不做显示,也不会报错,但是<??/> 这种标签不是有问题的,这叫自闭合标签,<??></??>这种叫闭合标签,这种形势浏览是能够解析的,自闭合标签<??>标准写法是要写成<??/>在最后”>”要结束的时候前面加个”/“,这是更规范得写法,让阅读代码的人一眼就能明白.

body部分

1、body里面分为两类标签：块级标签和内联标签，块级标签占用的是整行，内联标签占用的他所使用的实际大小如下图：

块级别标签&内联标签:

label

2、特殊符号特殊处理
如<h1>这是个标签，如果我只想在页面上这个<h1>字符串，就是不想让浏览器解释这个字符的样式， 这里就需要做特殊处理了，特殊符号有自己定的规则如以下：

特殊字符
HTML原代码 显示结果 描述
&lt; < 小于号或显示标记
&gt; > 大于号或显示标记
&amp; & 可用于显示其它特殊字符
&quot; “ 引号
&reg; ® 已注册
&copy; © 版权
&trade; ™ 商标
&ensp;   半个空白位
&emsp;   一个空白位
&nbsp; 不断行的空白

p标签和br标签

<p></p>标签:段落标签,每一对p标签为一段,代码如下:

<p>段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落段落段落段落段落段落</p>

<br/>标签：换行标签；有一个<br/>为一个换行，看下面的代码:

<p>段落段落段落段落段落段落段<br/>落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落段落段落段落段落段落</p>

a标签

<a></a>标签用来跳转和锚

1、跳转:
默认如果在<a><a/>标签中不设置那么他仅仅在浏览器中显示文本，如下面代码:

<a>不能跳转</a>
<a href="https://liangxiansen.github.io/">能跳转</a>

点击后将跳转到指定的连接地址~，在当前页面打开的！

如果让他用一个新的标签中打开连接地址代码如下：

<a target="_blank" href="https://liangxiansen.github.io/">跳转到我的博客</a>

2、锚:
锚的作用是类似于读书时候的书签，当你你点击这个“锚”=“书签”，的时候就跳转到指定的位置

<a href="#a2">跳转至第二章</a>
<!--在标签里，ID是这个标签的唯一的值，我们在做锚的时候指定他的ID即可-->
<!--<a href="#a2"> 上面的代码href="#要跳转的标签"-->
<div id="a1" style="height:700px;">第一章</div>

<div id="a2" style="height:700px;">第二章</div>

上面的代码中，如果点击了书签之后，那么就会跳转到id=a2的书签的位置！

h标签

标题标签,1~6级标题,代码:

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

效果:

h标签

img标签

img标签用于在页面上插入图片,img标签图片跳转的时候去边框,IE显示有问题

<!--插入图片-->
<img src="皮卡丘.jpeg" style="height: 500px;width: 500px;">

img标签

Select标签

未分组select标签:

<select>
    <option value="1">上海</option>
    <option value="2">北京</option>
    <option value="3" selected="selected">广州</option>
    <!--这里默认是广州因为这里设置selected="selected" 这样页面刚加载完,显示默认选择的就是广州-->
</select>

select标签

分组后select标签:

<select>
    <optgroup label="河北省">
        <option>石家庄</option>
        <option>邯郸</option>
    </optgroup>
    <optgroup label="山西省">
        <option>太原</option>
        <option>平遥</option>
    </optgroup>
</select>

SelectGroup

设置select标签长度:

<select size="2">
    <option value="1">上海</option>
    <option value="2">北京</option>
    <option value="3">广州</option>
</select>

form表单

1、单选框:

<!--第一中情况不互斥-->
男<input type="radio"/>
女<input type="radio"/>
<hr/>
<!--对于input标签来说只要，radio的name值相同，那么他们就会互斥-->
男<input type="radio" name="gender"/>
女r<input type="radio" name="gender"/>

效果:

单选框

2、复选框:

娱乐<input type="checkbox"/>
时尚<input type="checkbox"/>
音乐<input type="checkbox" checked="checked"/>
<!--这里加一个标识checked="checked，为默认选择"-->

效果:

多选框

3、text&password输入框:

<!--标准的输入框-->
<input type="text"/>
<!--密码的输入框（输入的内容是保密的）-->
<input type="password"/>

效果:

文本框

4、文件上传:

<input type="file"/>

上传文件

5、多行文本框:

个性签名:<textarea style="width: 200px; height: 100px"></textarea>

效果:

多行文本框

6、Label标签:
使用label标签,可以在点击文字的时候将鼠标焦点转移到input内容上,帮助用户选择.

<div>
    <label for="name_1">
        姓名:<input id="name_1" type="text"/>
    </label>

    <label for="name_2">
        婚否:<input id="name_2" type="checkbox"/>
    </label>
</div>

效果:

Label

7、提交表单:
form

<form action="www.baidu.com" method="POST" >
    <!--这里action是告诉html提交到哪里-->
    <!--method是通过什么方法去action指定的地址-->
    <p>用户名:<input type="text" name="username"/></p>
    <p>密码:<input type="password" name="password"/></p>
    <!--这里的name属性是当咱们将数据提交到指定的action地址时,服务端接收到的数据后如何去辨别数据-->
    <!--服务端得到数据后,就是一个字典类型,把这里的用户的输入的内容复制给name作为为一个字典key:value形势-->
    <input type="submit" value="提交"/>
    <input type="button" value="按钮"/>
    <!--这里提交按钮才有反映，submit是用来提交当前的表单的，当然可以有多个表单-->
    <!--但是，这个submit需要写入表单内，那么提交的时候是提交的当前表单-->
    <!--button按钮是没有任何功能的,需要给他添加上动作(js)-->
</form>

效果:

form

序号标签

<!--项目序号-->
<ul>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ul>

<ol>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ol>

<dl>
    <dt>北京市</dt>
    <dd>海淀区</dd>
    <dd>东城区</dd>
    <dd>朝阳去</dd>
    <dt>湖南省</dt>
    <dd>长沙</dd>
</dl>

效果:

序号

表格

<!--表格,表格边框1-->
<table border="1">
    <tr>
        <!--列合并居中,colspan指的是合并多少个-->
        <th colspan="3">标题一</th>
        <th>标题二</th>
    </tr>
    <tr>
        <td>内容一</td>
        <td>内容二</td>
        <td>内容三</td>
        <td>内容三</td>
    </tr>
    <tr>
        <td>内容一</td>
        <!--行合并居中-->
        <td rowspan="2">内容二</td>
        <td>内容三</td>
        <td>内容三</td>
    </tr>
    <tr>
        <td>内容一</td>

        <td>内容三</td>
        <td>内容三</td>
    </tr>
    <tr>
        <td>内容一</td>
        <td>内容二</td>
        <td>内容三</td>
        <td>内容三</td>
    </tr>
</table>


<!--水平线-->
<hr />


<!--表格,表格边框1-->
<table  border="1">
    <thead>
    <!--表头-->
        <tr>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
            <th>标题四</th>
        </tr>
    </thead>
    <tbody>
    <!--表格主体-->
        <tr>
            <td>第一列</td>
            <td>第二列</td>
            <td>第三列</td>
            <td>第四列</td>
        </tr>
         <tr>
            <td>第一列</td>
            <td>第二列</td>
            <td>第三列</td>
            <td>第四列</td>
        </tr>

    </tbody>
</table>

效果:

table

ifram标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>汽车之家</h1>
    <!--框架嵌入-->
    <iframe style="width: 100%;height: 2000px;" src="http://autohome.com.cn"></iframe>
</body>
</html>

效果:

iframe

fieldset标签

<fieldset>
    <legend>协议</legend>
    请仔细阅读协议内容：
</fieldset>

效果:

table

本文标题:HTML 基础

文章作者:梁先森

发布时间:2016-09-27, 14:09:51

最后更新:2017-08-02, 14:15:20

原始链接:http://www.liangxiansen.cn/2016/09/27/html/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 什么是HTML？
    1. 1.1. Html和CSS、js的关系
    2. 1.2. 第一个HTML
    3. 1.3. Doctype
  2. 2. head部分
    1. 2.1. Meta(metadata information)
    2. 2.2. Title
    3. 2.3. Link
    4. 2.4. Style
    5. 2.5. Script
  3. 3. body部分
    1. 3.1. p标签和br标签
    2. 3.2. a标签
    3. 3.3. h标签
    4. 3.4. img标签
    5. 3.5. Select标签
    6. 3.6. form表单
    7. 3.7. 序号标签
    8. 3.8. 表格
    9. 3.9. ifram标签
    10. 3.10. fieldset标签
|