前端开发之HTML最佳总结

Posted runnermark

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发之HTML最佳总结相关的知识,希望对你有一定的参考价值。

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文档。

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

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

HTML注释

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

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

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

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

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

HTML注释的注意事项:

  1. HTML注释不支持嵌套。
  2. 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>

浏览器展示特点:

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

超链接标签 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:[email protected]">联系我们</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: 表示鼠标悬停时显示的标题

链接其他表现形式:

  1. 目标文档为下载资源 例如:href属性值,指定的文件名称,就是下载操作(rar、zip等)
  2. 电子邮件链接 前提:计算机中必须安装邮件客户端,并且配置好了邮件相关信息。 例如:<a href="mailto:[email protected]">联系我们</a>
  3. 返回页面顶部的空链接或具体id值的标签 例如:<a href="#">内容</a><a href="#id值">内容</a>
  4. javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码。 例如:<a href="javascript:alert()">内容</a>
  5. 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 = "提示信息" />

 

  1. src设置的图片地址可以是本地的地址也可以是一个网络地址。
  2. 图片的格式可以是png、jpg和gif。
  3. alt属性的值会在图片加载失败时显示在网页上。
  4. 还可以为图片设置宽度(width)和高度(height),不设置就显示图片默认的宽度和高度
  5. 与行内元素在一行内显示
  6. 可以设置宽度和高度
  7. 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最佳总结的主要内容,如果未能解决你的问题,请参考以下文章

web前端开发JQuery常用实例代码片段(50个)

markdown Snippets.md是我最常用的HTML,CSS和JavaScript代码片段,用于前端Web开发

前端开发常用js代码片段

前端面试题之手写promise

前端开发中最常用的JS代码片段

js学习总结----crm客户管理系统之前端页面开发及数据渲染