乐趣区

关于前端: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)

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章