HTML

[](#html是什么)HTML是什么？

HTML（Hyper Text Markup Language）超文本标记语言。超文本为超级文本，能够蕴含：图片，音频，视频，超链接，表格等等。

历史更新迭代，html的历史

HTML5 是最新版本 HTML4.01 是上一个版本

document 文档

c/s架构模式 客户端/服务器

有LOL，淘宝

须要一直保护客户端

b/s架构模式 浏览器/服务器 brower 浏览器

有QQ空间，微博

方便快捷 简便

以下是HTML文档的初始格局

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>这是我的第一个文档</title>    </head>    <body>            </body></html>

[](#解析如下)解析如下

  • <!DOCTYPE html> 申明式语句，申明一下以后的html版本是HTML5
  • <title>这是我的第一个网页</title> 题目标签
  • <meta charset="UTF-8"> 阐明一下以后文档的解读编码为中文
  • <body></body> 网页中能看到的内容，写在body中
  • <head></head> 通常搁置网页的设置
  • <html></html> 所有标签的根标签
  • <!--这是一个正文--> 正文快捷键 ctrl+/
    • *

[](#注意事项)注意事项

  • 标签是分类型的 单标签 双标签
  • 双标签 <标签名称>标签的内容</标签名称> <开始标签></完结标签>
  • 单标签 <单标签 />
  • 属性 标签是有属性的 <开始标签的标签名称 属性=“属性值” name=value> 标签名称 属性 之间以空格辨别
  • 标签是有嵌套关系的 留神正确嵌套
  • 标签是有关系的 父子关系 兄弟关系 后辈关系

标签和本义符相干常识

  • &nbsp; 是空格(本义符)
  • &lt; &gt; 别离是< 和 >
  • <p></p> 段落标签
  • <span></span> 纯正的文本标签
  • <img> 图片标签
  • src:图片资源(source) 相对路径（本地图片） 绝对路径（线上图片） base64

  • width height

    • px
    • 百分比：以父标签的宽度为依赖
  • alt 图片加载不进去时显示进去的文字
  • title 鼠标移入时，图片显示进去的文字

HTML标签相干常识及色彩分类

[](#音频-视频)音频、视频

    <audio controls="controls" src=""></audio>    <video controls="controls" src=""></video>    <!--controls 控件是否可见-->

因为不同浏览器显示成果不同的起因，将在第二阶段具体解释。

[](#有序列表)有序列表

代码如下

    <!--type的值能够为，“a”,“A”,“i”,“I”,“1”-->    <ol type = "1">        <li></li>        <li></li>        <li></li>    </ol>

成果实现如下：

1.2.3.

[](#无序列表)无序列表

代码如下

    <!--type的值能够为，square 正方形 desc 实心圆 circle 空心圆 none-->    <ul type = "none">        <li>今天放假</li>        <li>好开心</li>        <li>Yeah</li>    </ul>

成果实现如下：

今天放假好开心Yeah

[](#自定义列表)自定义列表

代码如下

    <!--起始于<dl>标签，每个列表项以<dt>开始，列表项正文<dd>-->    <dl>        <dt>我是王超</dt>        <dd>来自山西临汾</dd>    </dl>

成果实现如下：

我是王超    来自山西临汾

[](#超链接标签)超链接标签

    <!--href能够是本地链接，也能够是线上链接        target是指关上以后网页的形式，self为默认本身窗口关上，_blank为在新窗口关上    -->    <a href="http://www.baidu.com" target="self">请跳转到百度</a>
    <!--id 属性         是一个全局属性，每个标签都能够有的属性        id示意唯一性  每个标签只有一个id属性  id属性不能够反复  禁止以数字结尾    -->

[](#在以后页面进行跳转)在以后页面进行跳转

    <!--同页面跳转        须要有两个值：            href:#id;            要跳转的中央要有id属性    -->        <a href = "#hello">跳转到指定地位</a>    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <p id = "hello">你好，大舅哥</p>

[](#表格)表格

代码如下

    <table border="1px">        <!--tr代表行-->        <tr>            <!--colspan横跨多少列-->            <!--td代表列-->            <td colspan="5">swt2007开班</td>        </tr>        <tr>            <!--th示意加粗-->            <th>序号</th>            <th>学生姓名</th>            <td>联系方式</td>            <td>毕业院校</td>            <td>业余</td>        </tr>        <tr>            <td>1</td>            <td>杨涛</td>            <td>1234567897</td>            <td>山大</td>            <td>软工</td>        </tr>    </table>        <table border="1px">        <tr>            <td>1.1</td>            <td>1.2</td>            <td>1.3</td>        </tr>        <tr>            <!--rowspan竖跨多少行-->            <td rowspan="3">2.1</td>            <td>2.2</td>            <td>2.3</td>        </tr>        <tr>            <td>3.1</td>            <td>3.2</td>        </tr>        <tr>            <td>4.1</td>            <td>4.2</td>        </tr>    </table>        <!--cellpadding 单元格内容和边框两头的间距        cellspacing 单元格和单元格之间的间距    -->    <table border="1px" cellpadding="10" cellspacing="20">        <!--表格的题目-->        <caption>个人简历</caption>

[](#表单)表单

代码如下

    <!--表单  注册-->    <!--        注册        搜寻    -->    <span>用户名：</span><input type="text"><br>    <span>明码：</span><input type="password"><br>    <label>        <input type="radio" name="sex" checked="checked">男    </label>    <label>        <input type="radio" name="sex">女    </label>        <!--        <input>单行文本框        <input type="password">明码框        <input type="radio">单选框            如何让单选框关联起来？                给这些须要关联的单选框一个 name属性  属性值相等            如何给能够抉择的框 默认选中成果？                给其增加 checked属性 属性值为checked            如何能点击文本实现单选成果？                给其里面增加label标签，括起来    -->    <!--多选框-->    <p>请说出您的兴趣爱好有哪些？</p>    <label>        <input type="checkbox" checked="checked">读书    </label>    <label>        <input type="checkbox">看报    </label>    <label>        <input type="checkbox">嗑瓜子    </label>

[](#下拉列表)下拉列表

代码如下

    <!--下拉列表-->    省：    <select>        <option>山西省</option>        <option>陕西省</option>        <option>河南省</option>    </select>    市：    <select>        <option>太原</option>        <option>大同</option>        <option>忻州</option>    </select>        <!--文本域-->    <!--查问 如何设置文本域宽高，如何禁止拉伸-->    <textarea name="" id="" cols="30" rows="10"></textarea>        <!--按钮-->    <button>提交</button>    <!--value 值 也就是input的内容（value的值就是框框里的内容）-->    <input type="button" value="确定">

[](#题目标签)题目标签

h1-h6 代码如下

     <!--题目（h1-h6）-->    <h1>我是最大的题目</h1>    <!--h4和失常文本的字体大小统一-->    <h4>题目</h4>    <p>失常文本</p>    <!--标签是有权重的-->

实现成果如下：

[](#我是最大的题目)我是最大的题目

[](#题目)题目

失常的文本

[](#标签的分类)标签的分类

  • 块元素（block）：独自占据一整行，能够扭转宽高 ul ol p 默认宽度：父级容器的100%
  • 内联块元素（inline-block）：不独占整行，能够扭转宽高；input button
  • 内联元素/行内元素（inline）：不独占整行，不能够扭转宽高；span a 宽度：取决于本身内容的宽度

[](#色彩的分类)色彩的分类

色彩：

三种形式1、英文单词：red,black,white2、16进制 0-9 a-f     #000000(彩色) #ff0000(红色) #00ff00(绿色) #ffffff(红色)    三原色 rgb        #000          #f00         #fff    越靠近0就越深，越靠近f就越浅3、rgb()   每个数值的取值范畴是0-255      rgb(0,0,0)   rgb(255,255,255)