学习笔记-初学HTML

作者: sofiiii | 来源:发表于2019-05-24 15:33 被阅读0次

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://img.haomeiwen.com/i2551993/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

学习笔记-初学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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读