前端开发之HTML最佳总结

时间：2018-07-21 12:00:53 阅读：285 评论：0 收藏：0 [点我收藏+]

标签：box 引擎 icon图标不执行分隔线 jpg ora tools span

HTML简介

前端简介

web1.0时代的网页制作：静态网页供展示无交互性；网页三剑客 Dreamweaver+Fireworks+Flash就是web1.0时代的产物。
web2.0时代的前端开发：静态网页和动态网页；HTML、CSS、JavaScript；新的标准是W3C。
- HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言。
- CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
- JavaScript是一门脚本语言。
- HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为

HTML简介

HTML，全称是超文本标记语言（HyperText Markup Language），它是一种用于创建网页的标记语言。标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。

HTML开发环境

有很多的HTML编辑器可以选择，常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。当然PyCharm也支持HTML开发。

文件后缀名规范

文件后缀一般使用.html或.htm .html与.htm均是静态网页后缀名，网页文件没有区别与区分，html与htm后缀网页后缀可以互换，对网页完全没有影响同时也没有区别。可以认为html与htm没有本质区别，唯一区别即多与少一个“l”。约定俗成的，大家更多的会使用.html

HTML标签介绍

如果你想知道整个前端所有的标签有哪一些，那么你可以打开一个百度首页，F12或者右击检查，你就会发现，如图：

技术分享图片

1. 在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<p>`都是标签。 2. HTML中标签**通常**都是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，如`<p>标签内容</p>`和`<div>标签内容</div>`。开始标签和结束标签之间的就是标签的内容。 3. 标签之间是可以嵌套的。例如：div标签里面嵌套p标签的话，那么`</p>`必须放在`</div>`的前面。 4. HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写，约定俗成的都以小写为准。

HTML文档结构

一个HTML文件是有自己固定结构的。

<!DOCTYPE HTML>
<html>
    <head>...</head>
    <body>...</body>
</html>

技术分享图片

<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。

<html></html> 称为根标签，所有的网页标签都在<html></html>中。
<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部分内容）最终会在浏览器中显示出来。

HTML文档包含了HTML标签及文本内容，不同的标签在浏览器上会显示出不同的效果，所以我们需要记住最常见的标签的特性。

HTML注释

无论我们学习什么编程语言，一定要重视的就是注释。 HTML中注释的格式:

<!--这里是注释的内容-->

注意：注释中可以直接使用回车换行。

并且我们习惯用注释的标签把HTML代码包裹起来。如：

<!-- xx部分 开始 -->
    这里放你xx部分的HTML代码
<!-- xx部分 结束 -->

HTML注释的注意事项：

HTML注释不支持嵌套。
HTML注释不能写在HTML标签中

head标签相关

head标签的主要内容和作用，文档的头部描述了文档的各种属性和信息，包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端）的等。以下标签是可以用在head标签中的：

<head lang=‘en‘>
    <title>标题信息</title>
    <meta charset=‘utf-8‘>
    <link>
    <style type=‘text/css‘></style>
    <script type=‘text/javascript‘></script>
</head>

title标签

<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。

<!DOCTYPE HTML>
<html>
    <head>
        <title>前端开发</title>
    </head>
    <body></body>
</html>

meta标签

元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。
提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

http-equiv属性

它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值

<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

name属性

主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="前端开发">

其他标签

<!--标题-->
<title>前端开发</title>

<!--icon图标（网站的图标）-->
<link rel="icon" href="fav.ico">

<!--定义内部样式表-->
<style></style>

<!--引入外部样式表文件-->
<link rel="stylesheet" href="mystyle.css">

<!--定义JavaScript代码或引入JavaScript文件-->
<script src="myscript.js"></script>

body标签相关

想要在网页上展示出来的内容一定要放在body标签中，下面介绍一下body中常用标签

标题标签 h1~h6

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用css来定义来达到漂亮的显示效果。标题标签通常用来制作文章或网站的标题。

h1~h6标签的默认样式：

<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>前端开发</title>
    </head>
    <body>
        <h1>一级标题</h1><h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    </body>
</html>

请看上面代码 <h1>和<h2>书写在一行上展示，但是在浏览器的效果却是换行了

文本样式标签主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等...

1. `<b></b>`：加粗
2. `<i></i>`：斜体
3. `<u></u>`：下划线
4. `<s></s>`：删除线
5. `<sup></sup>`：上标 
6. `<sub></sub>`：下标

现在如果想在一段文字中特别强调某几个字，这时候就可以用到`<em>`或`<strong>`标签。

这两个标签都是表示强调，但是两者在强调的语气上有区别:`<em>`表示强调，`<strong>`表示更强烈的强调。
在浏览器中`<em>`默认会用斜体表示，`<strong>`会用粗体来表示。两个标签相比，我们通常会推荐大家使用`<strong>`表示强调

段落标签 p

<p>,paragraph的简写。定义段落

<body>
        <p>段落一</p>
        <p>段落二</p>
</body>

浏览器展示特点：

跟普通文本一样，但我们可以通过css来设置当前段落的样式
是否又独占一行呢？答案是的块级元素

超链接标签 a

超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像

<body>
    <h1>

        <!-- a链接 超链接  
        target:_blank 在新的网站打开链接的资源地址
                _self 在当前网站打开链接的资源地址
        title: 鼠标悬停时显示的标题
        -->
        <a href="http://www.baidu.com" target="_blank" title="前端开发">百度一下</a>
        <a href="a.zip">下载包</a>
        <a href="mailto:zhaoxu@tedu.cn">联系我们</a>
        <!-- 返回页面顶部的内容 -->
        <a href="#">跳转到顶部</a>

        <!-- 返回某个id -->
        <a href="#p1">跳转到p1</a>
        <!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 -->
        <a href="javascript:alert(1)">内容</a>
        <a href="javascript:;">内容</a>

    </h1>
</body>

target:_blank 在新的网站打开链接的资源地址
target：_self 在当前网站打开链接的资源地址
title: 表示鼠标悬停时显示的标题

链接其他表现形式：

目标文档为下载资源例如：href属性值，指定的文件名称，就是下载操作(rar、zip等)
电子邮件链接前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息。例如：<a href="mailto:zhaoxu@tedu.cn">联系我们</a>
返回页面顶部的空链接或具体id值的标签例如：<a href="#">内容</a>或<a href="#id值">内容</a>
javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。例如：<a href="javascript:alert()">内容</a>
javascript:;表示什么都不执行，这样点击<a>时就没有任何反应例如：<a href="javascrip:;">内容</a

列表标签 ul，ol

网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟<li>标签一起用，每条li表示列表的内容

<ul>:unordered lists的缩写无序列表
<ol>:ordered listsde的缩写有序列表

 <!-- 无序列表 type可以定义无序列表的样式-->
    <ul type="circle">
        <li>我的账户</li>
        <li>我的订单</li>
        <li>我的优惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ul>
    <!-- 有序列表 type可以定义有序列表的样式 -->
    <ol type="a">
        <li>我的账户</li>
        <li>我的订单</li>
        <li>我的优惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ol>

ol标签的属性：

type：列表标识的类型

1：数字
a：小写字母
A：大写字母
i：小写罗马字符
I：大写罗马字符

列表标识的起始编号

默认为1

ul标签的属性： type：列表标识的类型

disc：实心圆(默认值)
circle：空心圆
square：实心矩形
none：不显示标识

盒子标签 `div`

<div>可定义文档的分区 division的缩写译：区 <div> 标签可以把文档分割为独立的、不同的部分,请看下面代码我们将他们进行分区

<div id=‘wrap‘>
    <div class=‘para‘></div>
    <div class=‘anchor‘></div>
    <div class=‘para‘></div>
    <div class=‘lists‘></div>    
</div>

我们将文档放在一个父级的区（div）中，它里面包含四块区（div）域，浏览器查看效果,你会发现每小块区域都是独占一行的，所以div是块级元素。另外，每块区域表示独立的一块，id属性和class属性其实很简单，你可以看成给这个区域起个名字。id是唯一的，一个页面中不能有两个重复的id，跟身份证号码一样，class可以设置同样的属性值，并且可以设置多个，例如class=‘para n1‘

图片标签 `<img/>`

一个网页除了有文字，还会有图片。我们使用<img/>标签在网页中插入图片

<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />

src设置的图片地址可以是本地的地址也可以是一个网络地址。
图片的格式可以是png、jpg和gif。
alt属性的值会在图片加载失败时显示在网页上。
还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度
与行内元素在一行内显示
可以设置宽度和高度
span标签可以单独摘出某块内容，结合css设置相应的样式

表格标签 table

表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

技术分享图片

<div class="table">
        <table>
            <!--表格头-->
            <thead>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】这里使用的是th-->
                    <th></th>
                </tr>
            </thead>
            <!--表格主体-->
            <tbody>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】这里使用的是td-->
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </tbody>
            <!--表格底部-->
            <tfoot>
                <tr>
                    <td></td>
                </tr>
            </tfoot>
        </table>
</div>

表格行和列的合并

rowspan 合并行(竖着合并)
colspan 合并列(横着合并)

<body>
    <div class="table">
        <table border="1" cellspacing="0">
            <!--表格头-->
            <thead>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】这里使用的是th-->
                    <th></th>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                </tr>
            </thead>
            <!--表格主体-->
            <tbody>
                <!--表格行-->
                <tr>
                    <td rowspan="3">上午</td>
                    <!--表格列，【注意】这里使用的是td-->
                    <td>语文</td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <!--表格列，【注意】这里使用的是td-->
                    <td>语文</td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <!--表格列，【注意】这里使用的是td-->
                    <td>语文</td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <td rowspan ="2">下午</td>
                    <!--表格列，【注意】这里使用的是td-->
                    <td>语文</td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <!--表格列，【注意】这里使用的是td-->
                    <td>语文</td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
            </tbody>
            <!--表格底部-->
            <tfoot>
                <tr>
                    <td colspan="6">课程表</td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>

表单标签 form

表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（）
表单用于显示、手机信息，并将信息提交给服务器

<form>允许出现表单控件</form>

表达属性如下

技术分享图片

表单控件分类如下

技术分享图片

<form action="http://www.baidu.com" method="get">
            <!-- input -->
            <!--文本框-->
            <p>
                用户名称：
                <input type="text" name="txtUsename" value="请输入用户名称" readonly>
            </p>
            <p>
                用户密码：
                <input type="password" name="txtUsepwd">
            </p>
            <p>
                确认密码：
                <input type="password" name="txtcfmpwd" disabled>
            </p>
            <!--单选框-->
            <p>
                用户性别：
                <input type="radio" name="sexrdo" value="男">男
                <input type="radio" name="sexrdo" value="女" checked=‘‘>女
            </p>
            <!--复选框-->
            <p>
                用户爱好：吃
                <input type="checkbox" name="chkhobby" value="吃" checked> 喝
                <input type="checkbox" name="chkhobby" value="喝"> 玩
                <input type="checkbox" name="chkhobox" value="玩"> 乐
                <input type="checkbox" name="chkhobox" value="乐" checked>
            </p>
            <!-- 按钮 -->
            <p>
                <input type="submit" name="btnsbt" value="提交">
                <input type="reset" name="btnrst" value="重置">
                <input type="button" name="btnbtn" value="普通按钮">
            </p>
            <!--文件选择框-->
            <p>
                请上传文件：
                <input type="file" name="txtfile">
            </p>
            <!--textarea-->
            <p>
                自我介绍：
                <textarea name="txt" cols="20" rows="5"></textarea>
            </p>
            <!--选择框-->
            <!--滚动列表 multiple设置以后实现多选效果，ctrl+鼠标左键进行多选-->
            <p>籍贯：
                <select name="sel" size="3" multiple>
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广州" selected>广州</option>
                </select>
            </p>
            <!--下拉列表-->
            <p>意向工作城市：
                <select name="sel">
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广州" selected>广州</option>
                </select>
            </p>        
        </form>

其他标签

换行标签 `<br>`

<br>标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。

分割线 `<hr>`

<hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容

特殊符号

浏览器在显示的时候会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML代码中的所有连续的空行（换行）也被显示为一个空格。

所以HTML代码对缩进的要求并不严格，我们通常使用缩进来让我们的代码结构更清晰，仅此而已。

常用特殊字符

技术分享图片

HTML特殊符号对照表：http://tool.chinaz.com/Tools/HtmlChar.aspx

HTML标签属性

HTML标签分类

标签嵌套规则

参考链接

前端开发之HTML最佳总结

标签：box 引擎 icon图标不执行分隔线 jpg ora tools span

原文地址：https://www.cnblogs.com/runnermark/p/9344785.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

前端开发之HTML最佳总结

HTML简介

前端简介

HTML简介

HTML开发环境

文件后缀名规范

HTML标签介绍

HTML文档结构

HTML注释

head标签相关

title标签

meta标签

http-equiv属性

name属性

其他标签

body标签相关

标题标签 h1~h6

段落标签 p

超链接标签 a

列表标签 ul，ol

盒子标签 div

图片标签 <img/>

表格标签 table

表单标签 form

表达属性如下

表单控件分类如下

其他标签

换行标签 <br>

分割线 <hr>

特殊符号

HTML标签属性

HTML标签分类

标签嵌套规则

参考链接

盒子标签 `div`

图片标签 `<img/>`

换行标签 `<br>`

分割线 `<hr>`