前端开发之HTML

　　　　　　　　　　　　　　　　　　　　HTML

HTML是网页的主体部分，也是一个网页的基础。因为一个网页可以没有样式，没有交互但必需要有结构，所以也是前端的基础。

HTML简介

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

HTML文件后缀

文件后缀一般使用.html或.htm .html与.htm均是静态网页后缀名，网页文件没有区别与区分，html与htm后缀网页后缀可以互换，对网页完全没有影响同时也没有区别。

HTML标签

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文件的注释格式

<!--注释内容-->  # 注释中可以直接使用换行

 注意事项：

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>

body标签

body标签主要用于存放网页中要展示的内容。

body常用坦克嵌套的标签：

　　标题标签h1-h6：

　　　　标题标签通常用来制作文章或网站的标题

　　　　<h1>~<h6>标签可自定义标题，h1~h6标题从大到小。在使用<h>标签时应注意对应的层级。不能通过标题标签来改变同行的文字大小，因使用CSS来定义想要的效果。

　　　　文本样式标签主要用于对网页中的文本进行修饰：

　　　　　　1.<b></b>:加粗

　　　　　　2.<i></i>:斜体

　　　　　　3.<u></u>:下划线

　　　　　　4.<s></s>:删除线

　　　　　　5.<sup></sup>:上标

　　　　　　6.<sub></sub>:下标

　　　　　　7.<em>或<strong>：强调，后者比前者语气更重，推荐使用<stong>

　　段落标签<p>

　　　　<p>,paragraph的简写。定义段落，示例：

　　　　　　<body>

　　　　　　 　　<p>段落内容<p>

　　　　 　　<body>

　　　　段落标签也可使用CSS来设置当段格式

　　超链接标签a

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

　　　　格式及释义：

        <!-- a链接 超链接  
        target:_blank 在新的网站打开链接的资源地址
                _self 在当前网站打开链接的资源地址
        title: 鼠标悬停时显示的标题
        -->
        <a href="http://www.baidu.com" target="_blank" title="小说网">小说网</a>
        <a href="a.zip">下载包</a>
        <a href="mailto:xy_zhai@163.com">联系我们</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>

　　列表标签ul、ol
　　　　网站上一些关于列表相关的内容如菜单、物品列表等均可使用列表标签。通常后面跟<li>标签一起用，每条li表示列表的内容。
　　　　ul：
　　　　　　unordered list 的缩写，指无需列表
　　　　　　格式：
　　　　　　　　<ul type='列表的样式'>
　　　　　　　　　　<li>列表的内容<li>
　　　　　　ul 列表的样式：
　　　　　　　　* disc：实心圆（默认值）
　　　　　　　　* circle：空心圆
　　　　　　　　* square：实心矩形
　　　　　　　　* none：不显示样式
　　　　　　
　　　　ol：
　　　　　　ordered listsde 的缩写，指有序列表

　　　　　　格式：
　　　　　　　　<ol type='列表的样式'>
　　　　　　　　　　<li>列表的内容<li>
　　　　　　ol列表的样式：
　　　　　　　　* 1：数字
　　　　　　　　* a：小写字母
　　　　　　　　* A：大写字母
　　　　　　　　* i：小写罗马字符
　　　　　　　　* I：大写罗马字符
　　盒子标签<div>
　　　　division的简写，可用古文档的分区，译为：‘区’。<div>可以把文档分割为独立的、不同的部分。
　　　　示例：
　　　　<body>
　　　　    <div id="wrap">
　　　　        <div class="para">
     　　       　　<p style="height: 1000px" id="p1">段落</p>
    　　    　　</div>
　　      　　  <div class="anchor">
    　　        　　<!--我是普通的文本-->
       　　     　　<h1>
        　　        　　<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>
          　　      　　<a href="#p1">跳转到p1</a>
            　　    　　<a href="javascript:alert(1)">内容</a>
            　　    　　<a href="javascript:;">内容</a>
          　　  　　</h1>
      　　  　　</div>
      　　  　　<!-- <h2>暗网</h2>
      　　  　　<h3>暗网</h3>
      　　  　　<h4>暗网</h4>
      　　  　　<h5>暗网</h4>
     　　   　　<h6>暗网</h6> -->
      　　  　　<div class="para">
      　　  　　<!-- 定义段落 通常指文章一段内容 -->
      　　  　　<p>web1.0 ‘网页制作’是web1.0 的产物，网页主要是静态网页，即仅支持用户浏览，缺乏交互性。web1.0还有所谓的’网页三剑客‘：“Dreamweaver+Fireworks+Flash”</p>
      　　  　　<p>web2.0 ‘前端开发’是web2.0的产物，网页有静态网页和动态网页，所谓动态是指用户可以与服务器进行交互。比如登陆验证就需要通过服务器进行验证。
            　　处于2.0的时代，网页三剑客已经不能满足我们的需求，因为无论是开发难度或者是开发方式上均不能满足，而且其开发的网页维护困难，代码冗余。</p>
       　　 　　</div>
      　　  　　<div class="lists">
        　　    　　<!-- 无序列表 -->
         　　   　　<ul type="circle">
          　　    　   <li>我的账户<li>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<li>我的订单</li>    　　　　　　　　　　　　　　　　　　　　　　　　<li>我的优惠券</li>    　　　　　　　　　　　　　　　　　　　　　　　　<li>我的收藏</li>    　　　　　　　　　　　　<li>我的购物车</li>    　　　　　　　　　　　　<li>退出</li>　　　　　　　　　　</ul>
　　　　　　　　　　<!-- 有序列表 -->
　　　　　　　　　　<ol type="a">    
　　　　　　　　　　　　<li>我的账户</li>    
　　　　　　　　　　　　<li>我的订单</li>   
　　　　　　　　　　　　<li>我的优惠券</li>   
　　　　　　　　　　　　<li>我的收藏</li>    
　　　　　　　　　　　　<li>我的购物车</li>   
　　　　　　　　　　　　<li>退出</li>
　　　　　　　　　　</ol>
　　　　　　　　</div>
　　　　　　</div>
　　　　</body>
　　　　上述代码可以整合为以下层次结构：　　　　　　　　　　　　　　　　<li>我的订单</li>    <li>我的优惠券</li>    <li>我的收藏</li>    <li>我的购物车</li>    <li>退出</li></ul><!-- 有序列表 --><ol type="a">    <li>我的账户</li>    <li>我的订单</li>    <li>我的优惠券</li>    <li>我的收藏</li>    <li>我的购物车</li>    <li>退出</li><div id='wrap'>
    　　　　　　<div class='para'></div>
   　　　　　　 <div class='anchor'></div>
   　　　　　　 <div class='para'></div>
  　　　　　　  <div class='lists'></div>    
　　　　　　</div>
　　　　上面中的id和class属性可以看成文件的名字，id是唯一的；class属性可以设置同样的属性，也可以设置多个。
　　图片标签<img/>
　　　　网页中不但可以有文字也可以有图片，可以用<img/>来插入图片。
　　　　　　语法：
　　　　　　　　<img src="图片地址" alt=“图片加载失败的内容” title=‘提示信息’/>
　　　　　　注意：
　　　　　　　　1.src的图片地址可以是本地也可以是网络的
　　　　　　　　2.图片的格式可以是jpg、png或gif
　　　　　　　　3.alt的属性值仅在图片加载失败时显示
　　　　　　　　4.可以自定义图片的高度(height)和宽度(width)，不设置则显示默认值
　　　　　　　　　　<div>
    　　　　　　　　 <span>与行内元素展示的标签<span>
     　　　　　　　　<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3726253094,1735197166&fm=200&gp=0.jpg" alt="美女哎" style="width:200px;height:200px">
     　　　　　　　　<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1073218314,3437616161&fm=26&gp=0.jpg" alt="被豹子吃了"  style="width: 200px;height: 200px">
　　　　　　　　　</div>
　　　　　　　　5.与行内元素在一行显示
　　　　　　　　6.span标签可以单独摘出，结合CSS设置相应的样式
　　　　　　　　　　<p>web1.0 ‘网页制作’是web1.0 的产物，网页主要是<span><b>静态网页</b></span>，即<span><u>仅支持用户浏览</u></span>，<span><i>缺乏交互性</i></span>。web1.0还有所谓的’网页三剑客‘：“Dreamweaver+Fireworks+Flash”</p>
　　　　　　　　　　网页显示：web1.0 ‘网页制作’是web1.0 的产物，网页主要是静态网页，即仅支持用户浏览，缺乏交互性。web1.0还有所谓的’网页三剑客‘：“Dreamweaver+Fireworks+Flash”
　　其他标签
　　　　换行标签 <br>：
　　　　　　用来将网页中的内容换行，相当于word中的回车键
　　　　分割线 <hr>：
　　　　　　用来在网页中创建水平分割线，通常用来分割内容
　　　　特殊符号
　　　　　　浏览器在显示的时候会移除源代码中多余的空额和空行，所有的连续空格或空行都会算作一个空格。　
　　　　特殊字符
　　　　　　在HTML中输入空格必须使用特殊字符：“ &nbsp；”　
　　　　　　常用的特殊字符：
　　　　　　　　内容        代码
　　　　　　　　空格          &nbsp;
　　　　　　　　 >            &gt;
　　　　　　　　 >            &lt;
　　　　　　     &            &amp;
　　　　　　　　 ¥　　　　    &yen;
　　　　　　　　版权          &copy;
　　　　　　　　注册  　　    &reg;
　　　　　　常用符号对照表：http://tool.chinaz.com/Tools/HtmlChar.aspx
body常用标签一

表格标签 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>
View Code

表格行和 列的合并

rowspan 合并行 （竖着合并）
colspan 合并列（横着合并）

<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>
示例

网页显示结果：

表单标签 form

表单是一个包含表单元素的区域

表单元素是允许用户在表中输入内容，如：文本域（textarea）、输入框（input）、单选框（）

表单的作用

表单用于显示、手机信息，并将信息提交到服务器

语法：

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

属性：

表单控件分类：

 

代码示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" >
    <title>常用标签</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
    <!--input-->
    <!--文本框-->
    <p>
        用户名称：
        <input type="text" name="txtUsename" value="请输入用户名" >
    </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="chkhobby" value="玩">玩
        <input type="checkbox" name="chkhobby" value="乐">乐
    </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 实现滚动-->
    <p>
        籍贯：
        <select name="sel" size="3" multiple>
            <option value="深圳">深圳</option>
            <option value="上海">上海</option>
            <option value="北京">北京</option>
        </select>
    </p>
    <!--下拉列表-->
    <p>
        工作意向地：
        <select name="sel">
            <option value="深圳">深圳</option>
            <option value="上海">上海</option>
            <option value="北京">北京</option>
        </select>
    </p>
</form>>
</body>
</html>
View Code

 HTML标签属性

HTML标签可以设置属性，属性一般以键值对的方式写在开始标签中。如

<div id="i1">这是一个div标签</div>
<p class='p1 p2 p3'>这是一个段落标签</p>
<a href="http://www.luffycity.com">这是一个链接</a>
<input type='button' onclick='addclick()'></input>

注意事项：

1.HTML标签除一些特定属性外可以设置自定义属性，一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序。
2.属性值要用引号包裹起来，通常使用双引号也可以单引号。
3.属性和属性值不区分大小写，但是推荐使用小写。

标签分类

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

常用的块状元素：

# 分区：<div>、段落：<p>、标题：<h1>~<h6> 、列表：<ol> & <ul>、表格：<table>、表单：<form> 、 <li>

常用的行内元素：

# 超链接：<a>、摘要：<span>、 换行：<br>、 小写罗马 字符：<i>、强调：<em>& <strong> 、 <label>

常用的行内块状元素：

# 图片：<img>、输入框： <input>

块级元素特点：display:block;

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素特点：display:inline;

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素的特点：display:inline-block;

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置

注意：可以通过display属性对块级元素、行内元素、行内块元素进行转换

标签嵌套规则

块状元素可以包含内联元素或某些块元素，但内联元素不能包含块元素，之能包含其它的内联元素。例：

<div><div></div><h1></h1><p><p></div> ✔️

<a href=”#”><span></span></a> ✔️

<span><div></div></span> ❌

块级元素不能放在p标签里面，比如

<p><ol><li></li></ol></p> ❌

<p><div></div></p> ❌

以下几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素：

h1、h2、h3、h4、h5、h6、p

li元素可以嵌入ul，ol，div等标签

    <ul>
        <li>
            <ul>
                <li>
                    <div>

                    </div>
                </li>
                <li>
                    <ol>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ol>
                </li>
            </ul>
        </li>
    </ul>

 

　　　　
　　　　　　　　　　

 

posted @ 2018-09-18 15:22  繁华无殇  阅读(178)  评论(0)  编辑  收藏  举报