学习笔记-初学HTML

1. HTML简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

2. HTML编辑器

Notepad++
https://notepad-plus-plus.org/
Sublime Text
http://www.sublimetext.com/
VS Code
https://code.visualstudio.com/

3. HTML框架

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

<!DOCTYPE>
<!DOCTYPE>位于文档的最前面，用于向浏览器说明当前.html文件使用的是哪种HTML或者XHTML标准规范。浏览器会按照此处指定的规范对html文件进行解析。
HTML5可以向下兼容，所以，现在直接指定为<!DOCTYPE html>即可。
charset（字符编码集）
GB2312：简体中文字符集，含6763个常用汉字
BIG5：繁体中文，港澳台地区使用
GBK：含全部中文字符，是对GB2312的扩展，支持繁体字
UTF-8：支持中文和英文等，是最常用的字符集

4. HTML标签

4.1 排版标签

标题标签 <h1></h1>
h 即 head 的简写
有<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 6种，从左到右字号依次变小。
基本格式<h1></h1>
像<h7>这种错误的标签在展示时不起作用
段落标签<p></p>
p 即 paragraph 的简写
基本格式<p>段落内容</p>
段落中的文本内容超出浏览器宽度之后会执行自动换行
水平线标签<hr />
hr 即 horizontal 的缩写
其作用是在页面中插入一条水平线
基本格式<hr />
这是一个自闭合标签。（普通标签成对出现；自闭合标签不需要包裹内容，自己就执行了开始和结束的操作）
容器标签 <div></div> 和 <span></span>
div 即 division 的缩写，分割、区分的意思
span 即 span ，跨度、范围的意思
这俩本质上是一个容器，类似于 Android 中的ViewGroup
<div>这是div标签中的内容</div>`` <span>这是span标签中的内容</span>

4.2 文本格式化标签

标签名	作用
<b></b>、<strong></strong>	加粗，XHTML推荐使用<strong>
<i></i>、<em></em>	斜体，XHTML推荐使用<em>
<s></s>、<del></del>	删除线，XHTML推荐使用<del>
<u></u>、<ins></ins>	下划线，XHTML推荐使用<ins>

4.3 标签属性

基本格式：<标签名属性1=”属性值1“ 属性2=”属性值2“></标签名>
标签可以拥有多个属性
属性必须写在开始标签中，位于标签名后面
属性之间不区分顺序
标签名与属性、属性与属性之间使用空格隔开
任何属性都有默认值，省略该属性表示使用默认值

4.4 图像标签

img 即 image 的缩写
基本格式<img src="图片URI/URL" />
<img />常用属性如下：

属性	属性值	属性含义
src	URI/URL	图像的路径
alt	文本	图像无法正常显示时的提示文本
title	文本	鼠标悬停于图像时显示的文本
width	像素（XHTML 不支持按页面百分比显示）	图像的宽度
height	像素（XHTML 不支持按页面百分比显示）	图像的高度
border	数字	设置图像边框的宽度

4.5 超链接标签

4.5.1 超链接标签<a></a>

anchor 的缩写
基本格式 <a href="跳转目标url" target="目标窗口的弹出方式">超链接文本或图像</a>
href 即 HyperText Reference , 指定要跳转的URL地址
target , 指定目标窗口的打开方式。取值为 self / blank , self 为默认值，blank 表示新窗口打开

外链需要添加 http:// 或 https:// 前缀
内部链接直接链接内部页面名称即可，如 <a href="index.html">首页</a>
如果当时没有确定链接目标时，可以为 href 赋值为 “#” ,即 href="#",表示一个空连接
各种网页元素，如文本、图像、表格、音频、视频等都可以作为超链接的载体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接文本示例</title>
</head>
<body>
    <a href="https://www.jianshu.com/u/414acf7abc2b" target="_blank">CnPeng简书</a>
    <br/>
    <a href="https://blog.csdn.net/north1989">CnPeng CSDN</a>
    <br/>
    <a href="aTag.html" target="_blank">内部链接--再打开一个aTag.html</a>
    <br/>
    <a href="#">空的超链接</a>
</body>
</html>

4.5.2 锚点

通过创建锚点，可以快速定位到目标内容区域
创建锚点分为两步：
为目标内容（即锚点）创建id 并赋值
将超链接文本与锚点的id 关联，<a href="#id名称"> 超链接文本 </a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#createAnchor">点击跳转到锚点位置</a>
    <br/>
    通过创建锚点，
    可以快速定位到目标内容区域

    <!--加这一堆br是为了增加页面高度，不然显示不出锚点效果-->
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>

    <h3 id="createAnchor">创建锚点分为两步</h3>
    <hr/>
        为目标内容（即锚点）创建id 并赋值
    <br/>
        将超链接文本与锚点的id 关联，&lt;a href="#id名称"&gt; 超链接文本 &lt;/a&gt;
</body>
</html>

4.6 <base> 标签

<base> 标签可以限定同一页面内所有超链接的打开方式。<base target="_blank">
设置 <base> 之后依旧可以为某个单独的超链接设置打开方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>base 标签</title>

    <!--指定页面中所有超链接的默认打开方式为 blank -->
    <base target="_blank">
</head>
<body>
    <a href="https://www.jianshu.com/u/414acf7abc2b" >CnPeng简书</a>
    <br/>

    <!--虽然 head 中设置了base,但此处依旧可以单独指定打开方式为 self,实现重载-->
    <a href="https://blog.csdn.net/north1989" target="_self">CnPeng CSDN</a>

    <br/>
    <a href="aTag.html">内部链接--再打开一个aTag.html</a>
    <br/>
    <a href="#">空的超链接</a>

</body>
</html>

5. 路径

5.1 相对路径

图像文件和HTML文件位于同一文件夹中，只需要输入图像文件的名称即可，<img src="logo.gif"/>
图像文件位于Html文件的下一级文件夹，输入文件夹名和文件名，二者之间用“/” 隔开，<img src="image/logo.gif"/>
图像文件位于HTML文件的上一级，在文件名之前加 " ../ ", 上两级则使用 " ../../ ",依次类推。<img src="../image/logo.gif"/>

5.2 绝对路径

本地绝对路径： D:\web\img\logo.gif
网络绝对路径：https://upload-images.jianshu.io/upload_images/2551993-7b4cba4929e08d7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700

6. 列表标签

6.1 无序列表<ul></ul>

所谓无序列表就是以小圆点或者小方块作为行首标志的列表
无序列表的各项之间是并列的，没有顺序级别的区分

<ul></ul> 之间只能嵌套 <li></li>,不允许嵌套其他标签
<li></li> 之间相当于一个容器，可以嵌套任意标签

6.2 有序列表 <ol></ol>

内部也是嵌套<li></li>
默认以 1、2、3...作为行首排序标志

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表ol</title>
</head>
<body>
    <ol >
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
    </ol>
</body>
</html>

6.3 自定义列表 <dl></dl>

<dl></dl>为外层标签、<dt></dt>为内层标签、<dt> 下还可以嵌套 <dd></dd>
自定义列表项前不具有任何项目符号，既没有小圆点也没有1234

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义列表</title>
</head>
<body>
    <dl>
        <dt>自定义列表项1</dt>
            <dd>自定义列表项1 的内容解释1</dd>
            <dd>自定义列表项1 的内容解释2</dd>
        <dt>自定义列表项2</dt>
            <dd>自定义列表项2 的内容解释1</dd>
            <dd>自定义列表项2 的内容解释2</dd>
    </dl>
</body>
</html>

7. 表格标签 table

<table></table> 用来定义表格，
<tr></tr> 用来定义行，嵌套在 <table></table> 中
<td></td> 用来定义行中的单元格，嵌套在 <tr></tr> 中
<tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相当于一个容器，可以嵌套任意元素

属性	属性含义	属性取值
borde	表格的边框，默认 border="0",即无边框	像素值
cellspacing	单元格与单元格边框之间的间距。默认 cellspacing="2"	像素值
cellpadding	单元格内容与单元格边框的间距。默认 cellpadding="1"	像素值
width	表格的宽度	像素值
height	表格的高度	像素值
align	表格在页面中的水平对齐方式	left 、center 、right
caption	标题	文本
colspan	从当前列向后横跨几列, 应用于td、th	数字
rowspan	从当前行向下竖跨几行, 应用于td、th	数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table cellspacing="3" cellpadding="2" border="1" align="left">
    <tr>
        <td>第一行第1列</td>
        <td>第一行第2列</td>
        <td>第一行第3列</td>
    </tr>
    <tr>
        <td>第二行第1列</td>
        <td>第二行第2列</td>
        <td>第二行第3列</td>
    </tr>
</table>
</body>
</html>

8. 表头标签

表头一般位于表格的第一行或者第一列。
表头标签为 <th></th>，在显示的时候默认会显示为加粗的效果
增加表头时，使用 <th></th> 替代对应位置的 <td></td>即可

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表头</title>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="10" align="center">
    <caption>caption标签是啥？标题？</caption>
    <tr>
        <th>属性</th>
        <th>含义</th>
        <th colspan="2">取值</th>
    </tr>
    <tr>
        <th>border</th>
        <td>单元格边框</td>
        <td>像素值，默认0</td>
        <td rowspan="3">rowspan从当前单元格向下跨三行</td>
    </tr>
    <tr>
        <th>cellspacing</th>
        <td>单元格与单元格边框的间距</td>
        <td>像素值，默认2</td>
    </tr>
    <tr>
        <th>cellpadding</th>
        <td>单元格内容与单元格边框的间距</td>
        <td>像素值，默认1</td>
    </tr>
</table>
</body>
</html>

8. 表单标签

html 中一个完整的表单通常由表单元素、提示信息、表单域（即多个表单的父容器）三部分组成。

image.png

8.1 imput 输入标签

input 、br、hr 、img、 base 都是单标签

image.png

多个 radio 使用相同的 name ，则表示这是一组数据，这样可以实现单选效果。如果不加 name 多个 radio 可同时被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
    用户名：<input type="text" maxlength="15"/>
    <br/>

    <!--次数密码中间的空格使用了是全角输入法，全角输入法中，空格占一个汉字的大小-->
    密　码：<input type="password"/>
    <br/>

    <!--使用name 限定了一组内容，从而实现单选-->
    性　别：
    <input type="radio" name="sex" checked="checked"/> 男
    <input type="radio" name="sex"/> 女
    <br/>

    爱　好：
    <input type="checkbox" name="hobby"/> 看电影
    <input type="checkbox" name="hobby"/> 读书
    <br/>

    <input type="button" value="普通按钮"/>
    <br/>
    <input type="submit" value="提交按钮"/>
    <br/>
    <input type="reset" value="重置按钮"/>
    <br/>
    <input type="image" src="../image/imgButton.png"/>
    <br/>

    请选择文件：<input type="file"/>

</body>
</html>

8.2 label标签

label 标签为 input 标签定义标注/标签
用来绑定一个表单元素，当点击 label 标签的时候，被绑定的表单元素就会获取焦点
通过 for 属性，可以绑定 label 和 input ; 或者直接用lable 标签将input 包裹起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label的使用</title>
</head>
<body>
    <!--label 中直接包裹 input,可以实现绑定-->
    <label>点击此处文本，用户名输入框会获取焦点 <br> 用户名：<input type="text"/></label>
    <br/>

    <hr/>
    <!--使用 label 的 for 属性绑定input-->
    <label for="#two">点击此处文本，密码输入框会获取焦点</label>
    <br/>
    用户名：<input type="text"/>
    <br/>
    密　码：<input type="text" id="#two"/>
</body>
</html>

8.2 textarea 文本域标签

<textarea></textarea>用来做大量文本的输入，支持多行
有 cols 、rows 属性。cols 限制每行中所输入的文本字数，rows 限制最大行数。（这两个属性通常不被使用，更多使用会使用CSS样式做相关控制）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>textarea标签</title>
</head>
<body>
    请输入评论内容：
    <br/>
    <textarea ></textarea>
</body>
</html>

8.2 下拉菜单 <select></select>

<select></select> 用来定义下拉菜单
<option></option> 用来定义下拉菜单选项
<select></select> 中至少包含一对 <option></option>
在 option 中定义了属性 selected="selected" 之后，表示该项被默认选中

8.2 表单域 <form></form>

该标签用来定义表单域，以实现用户信息的收集和传递，form 中的内容通常都会被提交到服务器。
基本语法格式：

 <form action="url地址" method="提交方式" name="表单名称">
     ...各种表单控件...
 </form>

常用属性有action、method、name
action : 指定接收并处理表单信息的服务器url地址
method : 表单数据的提交方式。分为 post / get
name : 指定表单名称，用来区分页面中的多个表单

9 HTML5

9.1 常用新标签

image.png

9.2 datalist 示例

datalist 中包裹 option
datalist 与 input 关联后，input 就具备的 select 的效果，同时具有了输入联想功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inputlist</title>
</head>
<body>
    <input type="text" value="请输入姓名" list="names">
    <datalist id="names">
        <option>张三</option>
        <option>李四</option>
        <option>王五</option>
    </datalist>

</body>
</html>

9.3 fieldset 示例

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fieldset</title>
</head>
<body>
    <fieldset>
        <legend>用户登录</legend>
        用户名:<input type="text"/>
        <br/>
        密　码:<input type="password"/>
    </fieldset>
</body>
</html>

9.4 新增的input type属性值

这些新增的类型，更加细化的限定了输入内容，如果输入格式不对，在提交的时候会自动给出相应提示
更多新增type 参考 w3school

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>newInputType</title>
</head>
<body>
    <form action="http://www.baidu.com">
        email：<input type="email"/>
        <br/>
        tel：<input type="tel"/>
        <br/>
        url：<input type="url"/>
        <br/>
        number：<input type="number"/>
        <br/>
        search：<input type="search"/>
        <br/>
        range：<input type="range"/>
        <br/>
        time：<input type="time"/>
        <br/>
        date：<input type="date"/>
        <br/>
        datetime：<input type="datetime-local"/>
        <br/>
        month：<input type="month"/>
        <br/>
        week：<input type="week"/>
        <br/>
        color：<input type="color"/>
        <br/>
        <input type="submit"/>
    </form>
</body>
</html>

9.5 新增的input 属性

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>newInputAttr</title>
</head>
<body>
    <form action="form.html">

        <input type="text" placeholder="请输入用户名"/>
        <br/>
        <br/>
        <!--可以简化为 <input type="text" autofocus/>  -->
        <input type="text" autofocus="autofocus" placeholder="自动获取焦点"/>
        <br/>
        <br/>
        <input type="file" multiple/>
        <br/>
        <br/>
        <input type="text" autocomplete name="identify" placeholder="下次自动补足输入内容"/>
        <br/>
        <br/>
        <!--在火狐浏览器中，如果没有输入内容，点击输入框外部区域，边框会变红-->
        <input type="text" required placeholder="这是必填项"/>
        <br/>
        <br/>
        <input type="text" accesskey="s" placeholder="获取焦点的快捷键为 alt+s"/>
        <br/>
        <br/>
        <input type="submit"/>
    </form>
</body>
</html>

image.png

10. 综合示例

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>学生档案</legend>
            <label>姓　　名：<input type="text" placeholder="请输入学生姓名"/></label> <br/>
            <label>手 机 号：<input type="tel" placeholder="请输入学生手机号"/></label><br/>
            <label>邮　　箱：<input type="email"/></label><br/>
            <label>所属学院：<input type="text" list="academy"/></label>
            <datalist id="academy">
                <option >JAVA学院</option>
                <option >前端学院</option>
                <option >PHP学院</option>
            </datalist><br/>
            <label>出生日期：<input type="date"/></label><br/>
            <label>语文成绩：<input type="number" max="100" min="0" value="0"/></label><br/>
            <label>数学成绩: <meter max="100" min="0" low="59" value="10"></meter></label><br/>
            <label>英语成绩: <meter max="100" min="0" low="59" value="90"></meter></label><br/>
            <input type="submit"><br/>
            <input type="reset">

        </fieldset>
    </form>
</body>
</html>

11. 多媒体标签

embed : 定义嵌入的内容
audio : 播放音频
video : 播放视频

11.1 embed

用来插入各种多媒体，格式可以是 Midi、Wav、 AIFF 、AU 、Mp3等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>embed</title>
</head>
<body>
<embed src="http://player.video.iqiyi.com/44cb2ab93ef163fea5a206e52da7c390/0/0/v_19rqyv6lfo.swf-albumId=1268727400-tvId=1268727400-isPurchase=0-cnId=3"
       allowFullScreen="true" quality="high" width="480" height="350" align="middle"
       allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</body>
</html>

上面示例代码中，embed 节点中的内容是直接从爱奇艺网站下复制的。做法是：找到一个视频 > 分享 > 点击向下的箭头（即更多）> 复制 html 代码即可

11.2 audio

html5 通过 <audio></audio> 标签实现音频播放
audio 开始和结束标签之间可以嵌入文本，当浏览器不支持该标签时，该文本可以作为提示语。
audio 在不同浏览器中的兼容情况如下：

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
</head>
<body>
    <!--使用方式1-->
    <audio src="../assets/audio/皇后大道东.mp3" autoplay="autoplay" controls="controls" loop="loop">
        提示语：您的浏览器不支持audio标签
    </audio>

    <br/>

    <!--使用方式2: 通过 source 定义三种音频格式，从而达到不同浏览器上都能播放的情况-->
    <audio loop controls preload="auto">
        <source src="../assets/audio/皇后大道东.mp3">
        <source src="../assets/audio/皇后大道东.ogg">
        <source src="../assets/audio/皇后大道东.wav">
        提示语：您的浏览器不支持audio标签
    </audio>
</body>
</html>

11.3 video

html5中使用<video></video> 来实现视频的播放
video 目前支持三种视频格式：ogg、mp4、webM
video 在各浏览器上的兼容情况如下：

image.png

image.png

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 218,451评论 6赞 506
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,172评论 3赞 394
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,782评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,709评论 1赞 294
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,733评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,578评论 1赞 305
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,320评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,241评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,686评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,878评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,992评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,715评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,336评论 3赞 330
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,912评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,040评论 1赞 270
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,173评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,947评论 2赞 355

学习笔记-初学HTML

1. HTML简介

2. HTML编辑器

3. HTML框架

4. HTML标签

4.1 排版标签

4.2 文本格式化标签

4.3 标签属性

4.4 图像标签

4.5 超链接标签

4.5.1 超链接标签<a></a>

4.5.2 锚点

4.6 <base> 标签

5. 路径

5.1 相对路径

5.2 绝对路径

6. 列表标签

6.1 无序列表<ul></ul>

6.2 有序列表 <ol></ol>

6.3 自定义列表 <dl></dl>

7. 表格标签 table

8. 表头标签

8. 表单标签

8.1 imput 输入标签

8.2 label标签

8.2 textarea 文本域标签

8.2 下拉菜单 <select></select>

8.2 表单域 <form></form>

9 HTML5

9.1 常用新标签

9.2 datalist 示例

9.3 fieldset 示例

9.4 新增的input type属性值

9.5 新增的input 属性

10. 综合示例

11. 多媒体标签

11.1 embed

11.2 audio

11.3 video

推荐阅读更多精彩内容