Html的简单应用

概述

　　HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)，其实说白了，底层socket通信，但是浏览器拿到的数据是浏览器自己认识的语言（html语言）。

html树

Doctype

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

有和无的区别

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

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

有，用什么？

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。

更多说明：https://hsivonen.fi/doctype/

如上图所示，html有很多标签，比如上图显示的，html标签（一个html文件里面只能有一个html标签），head标签、body标签。如果把html比作一个完整的人体框架，head就是html的头，body是html的身体。

标签闭合类型：

　　自闭合类型：

　　这种meta标签里面，由一个<>组合成的，后面和加/也可以不加。

　　<meta charset="UTF-8">

　　主动闭合类型：

　　由两组<>组成，最后一个<>里面还有一个/的，就称之为主动闭合标签。

　　<div>主动闭合标签</div>

Meta(metadata information)

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

　　1、页面编码（告诉浏览器是什么编码）

　　　　　　< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

　　2、刷新和跳转（刷新：很多网页需要试试刷新数据，所以可以这么做。刷新加跳转：比如你登录一网站，5秒以后刷新一下，并跳转到指定的网站）

　　　　　　< meta http-equiv=“Refresh” Content=“30″>

　　　　　　< meta http-equiv=”Refresh“ Content=”5; Url=https//www.baidu.com“ />

　　3、关键词（用户爬虫或者搜索网站的关键字来识别你的网站的作用和信息，但，但这只是关键字）

　　　　　　< meta name="keywords" content="python,自学，Charles，哈哈哈" >

　　4、描述信息（比如我搜索python 自学，可能用到的是keywords，但是描述信息则是关键字下面的信息，如下图）

　　5、描述

　　　例如：cnblogs

X-UA-Compatible

　　　　微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。

　　　　与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。因此，针对旧版本的浏览器设计的站点可能不会按预期显示。为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用指令来确定如何显示该网页。如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。更多

　　　　<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
　　　　<meta http-equiv="X-UA-Compatible" content="IE=Edge">
　　　　<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Title

　　网页头部信息

Link

　　CSS:

　　我们知道在html是一个裸体的人，他要美观就得穿衣服，所以CSS就是好比是衣服，css不能直接写在html的属性里面，这样不方便维护更改，也不美观，所以需要把css样式单独写到一个.css的文件里面。这里就是告诉html你去哪里穿衣服。

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

　　icon:

　　icon是设置这个title旁边的图标，比如这个百度的icon图标。

　　< link rel="shortcut icon" href="image/favicon.ico">

　　百度的icon设置，

Style

　　在页面中写样式

　　例如：

　　1、直接写到html文件的head里面，测试可以，但是生产不建议这么写。

　　2、写到专门的css文件里面，如下所示，href的值就是文件目录下的css文件，这样css和html就完全分离了，生产建议这么用。

　　我们看一下百度门户网站写法。

Script

　　1、引进文件

　　< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

　　2、写js代码

　　< script type="text/javascript" > ... </script >

常用标签　　

　　a标签

　　< a href="http://www.autohome.com.cn"> </a>

　　1、target属性，_black表示在新的页面打开

　　2、去除下划线，<a href="www.baidu.com" style="text-decoration: none">百度</a>

　　3、锚

　　类似下面的代码，如果页面篇幅很长，为了让用户快速的定位到指定的篇幅，就可以用下面的方法。首先被定为的div标签要写上id=？，然后按钮的地方（也就是a标签）href的值写#+id名称，我们知道在html里面#号就是用来定位id的，所以要想做锚的同学可以尝试下面的写法。

    <div>
        <a href="#i1">上篇</a>
        <a href="#i2">中篇</a>
        <a href="#i3">下篇</a>
        <a href="#i4">终极篇</a>
    </div>
    <div>
        <div id="i1" style="height: 200px">上篇</div>
        <div id="i2" style="height: 200px">中篇</div>
        <div id="i3" style="height: 200px">下篇</div>
        <div id="i4" style="height: 200px">终极篇</div>
    </div>

　 符号
　　http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html


　p 和 br

　　p表示段落，默认段落之间是有间隔的！！！

　　br 是换行，换完行行之间是没有间隔的。（自闭合标签）

　　H标签

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

　　标签分类

　　　　块级标签：默认占用整行空间。

　　　　行内标签：只占用内容的空间。代表span标签。

　　　　注意：怎么判断是行内标签，还是块级标签呢，可以利用浏览器的审查元素的功能查看。点击小箭头，然后选择那个标签，只要背景色是整行的，都是块级标签，反之是行内标签。

　　div标签

　　　　使用率最高的块级标签。

　　　input标签

　　　　1、input的标签即输入框，type=text时候是明文输入。password时候就常见的密码输入框。

　　　　 2、如果需要提交内容，必须得结合form表单来操作，主要属性为action和method。action就是form表单里面的数据提交到哪里，method属性即get和post。get是将input输入内容放到url提交的，post是在body里面，将数据提交到后台。

　　　　3、下图面的button属性在这里没有Mao用，但是可以使用CSS+js做定制自己想要的操作。

　　　　4、text和password里面的name是这个form表单的唯一表示，后台可以通过name=。。。，pwd=。。。，email=。。。拿到用户输入的数据。

　　　　5、如果text的写上value=“张三”，代表这个输入的默认值。

　　　　6、默认submit只提交input输入的内容，嵌套的其它标签内容不会被提交。

    <form action="http://localhost:63342/day14/html1.html" method="get">
        <input type="text" name="name">
        <input type="password" name="pwd">
        <input type="text" name="email">
        <input type="button" value="操作">
        <input type="submit" value="登录">
    </form>

　　　　敲黑板！！！敲黑板！！！

　　　　我们知道不管是输入框，还是下面说的单选或是多选，默认情况下，只有鼠标点击框或者选项的时候，才能选上。这样就有点不舒服了，所有有了label标签，他可以帮你解决这个问题，就算你选择的是框或选项前的文字，鼠标也会落到他对应的选项下，写法如下：

　　　　1、注意每个输入框或选项要想加这个，必须在对应的input前加上这句，注意for的值和下面的input里面的id的值必须式样的。

<label for="user">姓名:</label>
<input type="text" name="name" value="zhangsan" id="user">

　　　　7、get和post的区别

　　radio（单选框）：

　　1、type等于radio时候代表单选框。

　　2、如果不加name属性，就可以同时选择多个，name属性内容一样的时候，同时只能选择一个。

　　3、checked属性，默认选择。

<form>
        <div>
            男:<input type="radio" name="gender" value="man" checked="checked">
            女:<input type="radio" name="gender" value="women">
        </div>
            <input type="submit" value="提交">
    </form>

　　checkbox（多选框）：

　　1、多选框type类型是checkbox。

　　2、如果需要提交数据，需要写上name，所有checkbox的name写法都必须一样，后台拿到的数据会是favor=1&favor=2&favor=3，后台可以区分。

　　3、如果需要默认选择，加checked属性，值为checked就证明是默认选择的。

<form>
        <div>
            <p></p>
            篮球:<input type="checkbox" name="favor" value="1" checked="checked">
            足球:<input type="checkbox" name="favor" value="2">
            网球:<input type="checkbox" name="favor" value="3">
        </div>
            <input type="submit" value="提交">
    </form>

　　上传文件：

　　　　1、type等于file的时候，即文件上传。

　　　　2、但是注意，form表单里面必须写入enctype="multipart/form-data"，文件才能一点一点的传送到后台。

<form enctype="multipart/form-data">
        <input type="file">
        <input type="submit" value="提交">
    </form>

　　重置：

　　1、在同一个form表单中，如果type等于reset时候，但点击此按钮后，此form表单中的所有填写的内容和选择都将被清除，但默认选项不会被清除。

<input type="reset" value="重置">

　　多行文本：

　　1、name是用来提交数据使用的。默认值写到中间。

<form action="https://www.baidu.com" method="post">
    <textarea name="meno">默认值</textarea>
    <input type="submit" value="提交">
</form>

　　简单下拉框：

　　1、select标签是专门用来做下拉框的，注意写法，如果要提交数据，在select里面必须写上name值，get提交的是选择的是谁，提交的就是谁。例如，选的天津，url就会变成http://localhost:63342/day14/html1.html?city=2

　　 2、默认选择谁就在谁那里写上selected="selected"

<form action="http://localhost:63342/day14/html1.html" method="get">
    <select name="city">
        <option value="1">北京</option>
        <option value="2" selected="selected">天津</option>
        <option value="3">上海</option>
        <option value="4">广州</option>
    </select>
    <input type="submit" value="提交">
</form>

　　select多选：

　　1、在select标签里面写上属性size和multiple即可，可以按住Ctrl的同时选择你要选择的值。size的意思不是说显示几个，你可以理解为高度。multiple才是多选的。url会变成：http://localhost:63342/day14/html1.html?city=1&city=2

<form action="http://localhost:63342/day14/html1.html" method="get">
    <select name="city" size="3" multiple="multiple">
        <option value="1">北京</option>
        <option value="2" selected="selected">天津</option>
        <option value="3">上海</option>
        <option value="4">广州</option>
    </select>
    <input type="submit" value="提交">
</form>

　　select还有一个不常用的写法：

　　如下图，一般全国省市有时候会这么写，注意这里还是一样的。如果要提交select里面必须加上name属性，size代表高度，multiple允许多选，每个option里面的value属性必须赋值，url可以看截图。但是optgroup这个标签也就是加粗的字鼠标是不能选的。

<form action="http://localhost:63342/day14/html1.html" method="get">
    <span>
            <select name="city" size="6" multiple="multiple">
                <optgroup label="北京">
                    <option value="海淀区">海淀区</option>
                    <option value="朝阳区">朝阳区</option>
                </optgroup>
                <optgroup label="河北省">
                    <option value="承德市">承德市</option>
                    <option value="唐山市">唐山市</option>
                </optgroup>
                <optgroup label="山东省">
                    <option value="济南市" 济南市
                    </option>
                    <option value="青岛市">青岛市</option>
                </optgroup>
            </select>
        <input type="submit" value="登录">
    </span>
</form>

　　图片：

　　1、如果要跳转就在img外面加一层a标签。

　　2、img是图标的标签，src是图片在的相对路径。style可以控制它的大小等属性，title是鼠标放上去后显示的内容，如下图。

    <a href="https://www.baidu.com">
    <img src="image/456.jpg" style="height: 200px;width: 280px" title="机房">
    </a>

　　列表

　　ul和li

　　1、ul和li是固定搭配。

    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <ol>
        <li>456</li>
        <li>456</li>
        <li>456</li>
        <li>456</li>
    </ol>
    <dl>
        <dt>数字</dt>
        <dd>123</dd>
        <dd>123</dd>
        <dd>123</dd>
        <dt>字母</dt>
        <dd>abc</dd>
        <dd>abc</dd>
        <dd>abc</dd>
    </dl>

　　表格

　　1、tr：行（tbody里面的行）

　　 2、th：行（thead里面的行，其实就是加粗）

　　 3、td：列

　　4、border：加上边框，1代表框的像素。

　　table表格的写法分为两部分，table里面分为头和身体，头thead，身体tbody。thead里面的行是tr，列是th。而tbody里面的行也是tr，但列则是td--不加粗。

　　标准写法：

<table border="1">
    <thead>
    <tr>
        <th>主机</th>
        <th>IP</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>堡垒机1</td>
        <td>172.16.1.2</td>
        <td>
            <a href="">编辑</a>
            <a href="">详细</a>
        </td>
    </tr>
    <tr>
        <td>堡垒机2</td>
        <td>172.16.1.3</td>
        <td>
            <a href="">编辑</a>
            <a href="">详细</a>
        </td>
    </tr>
    </tbody>
</table>

　　合并单元格：

　　横向合并单元格：colspan，colspan等于几，就代表他横向占几个格。

纵向合并单元格：rowspan，rowspan等于几，就代表他纵向占几个格。

　分析：

　　横向合并：表格中一共是3行3列。首先我们让第二行（也就是tbody里面的第一行）的第二列colspan=“2”，让它同时占2格。这样的这行就4个格子了，那肯定是超出去了，要想不超出去只能把后面的一格删除掉（第二行的第三列删除）。

　　纵向合并：第二行的第一列和第三行的第一列要想合并，首先在第二行的里面加上rowspan=“2”，让它同时占用上下两格，同理然后把第三行的第一列删除，这样就完成了纵向合并。

<table border="1">
    <thead>
    <tr>
        <th>主机</th>
        <th>IP</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="2">堡垒机</td>
        <td colspan="2" rowspan="">172.16.1.2</td>
    </tr>
    <tr>
        <td>172.16.1.3</td>
        <td>
            <a href="">编辑</a>
            <a href="">详细</a>
        </td>
    </tr>
    </tbody>

　　fieldset：

　　1、固定写法fieldset里面的legend标签写上这个框的名字。

　　2、里面写上登陆窗口，当然你可以写别的。

　　个人感觉没什么实际性作用，但装饰应该是可以的。

    <fieldset>
        <legend>登陆信息</legend>
        <form action="http://localhost:63342/AD调整组织架构/test.html" method="get">
            <div>
            <label for="username">用户名:</label>
            <input id="username" type="text">
                </div>
            <div>
                <label for="passwd">密   码:</label>
                <input id="passwd" type="password">
            </div>
        </form>
    </fieldset>

posted @ 2019-09-19 20:45 Charles.L 阅读(715) 评论(0) 收藏举报

刷新页面返回顶部

Charles.L

人生苦短