乐趣区

关于前端:HTML重要知识合集

jiezi

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,white
2、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)
退出移动版