冠盖满京华，斯人独憔悴。---------杜甫
HTML课堂笔记
1 概念
HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建网页的标准标记语言。
标记语言是由标签构成的语言。<标签名称>例如html，xml(可扩展标记语言,也是一种标记语言,主要用于作为配置文件存在),标记语言不是编程语言。
HTML 运行在浏览器上，由浏览器来解析。
2 快速入门
-
html文档的后缀名
.html和.htm两种都可以，两者的区别就是没有区别,个人习惯不同而已。 -
标签的分类
围堵标签：有开始标签和结束标签，例如
自闭和标签：开始标签和结束标签都在一个标签中< br/>(直接< br>好像也行,如果你感觉前面换行标签处有空格,不是错觉,是真的有空格,没空格搞不出来😂) -
标签可以嵌套，但是嵌套的语法要正确(就像套娃,一层套一层)
正确案例：<p><a></a></p>
错误案例：<p><a></p></a>
- 标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开
<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
<p id="p1" name="p1">p是paragraph的首字母,就是段落的意思,即我所敲的这些字在网页上显现为段落</p>
- html标签不区分大小写，但是推荐全小写(主要是看得习惯)
3 开发工具(很多)dw,HBuilder,vs code等
记事本、notepad都可以，但是开发效率低。
4 HTML文档的基本结构
HTML文档也叫web页面。
基本结构
<!-- 声明当前文档是html5文档 -->
<!DOCTYPE html>
<!-- html,根元素 ，围堵标签-->
<html>
<!--head,头元素： 作用： 用于指定HTML文章中的一些元数据， 例如元数据 meta：定义页面的编码格式 title:定义页面的标题 -->
<head>
<meta charset="utf-8" />
<title>这是我的第一个HTML页面</title>
</head>
<!--body，主体：浏览器显示的内容都将在这里编写 -->
<body>
hello html 这是我的第一个HTML页面
</body>
</html>
HTML的注释
语法：
HTML注释以 结尾(csdn也可以用这个注释,因为你读这句话时会发现少了)。
HTML注释以<!-- 开头 ，以-->结尾(csdn也可以用这个注释,因为当你读上面这句话时会发现少了一部分)。
注释的部分浏览器不解析，注释是为了给程序员看，更好的了解html代码
<!--
这里编写HTML注释，
可以是一行，也可以是多行
-->
5 HTML中常用标签
5.1.文本标签
5.1.1. 标题标签 h1–h6:字体逐渐缩小
一般用在文章的标题上。
好好学习,天天向上
好好学习,天天向上
好好学习,天天向上
好好学习,天天向上
好好学习,天天向上
好好学习,天天向上
<!--方便起见,head之类的不写,直接写body里的-->
<body>
<h1>好好学习,天天向上</h1>
<h2>好好学习,天天向上</h2>
<h3>好好学习,天天向上</h3>
<h4>好好学习,天天向上</h4>
<h5>好好学习,天天向上</h5>
<h6>好好学习,天天向上</h6>
</body>
5.1.2 段落标签
一般用在正文。(实测,csdn-markdown可用)
世间安得双全法
不负如来不负卿
<p>世间安得双全法</p>
<p>不负如来不负卿</p>
5.1.3 换行标签
一般用在段落中强制换行。(比如这上面的空白)
<br>或<br/>
5.1.4 水平线标签
一般用来分隔内容。
<hr>或<hr/>
<hr color="green" size="5">
5.1.5 范围标签
一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使用。
<p><span style="color:gold; size:30px" >范围</span>标签</p>
PS：不是因为有了范围标签，局部内容的样式才有变化；是为了改变局部内容样子，我们才通过范围标签包裹，然后修改它的样式。
5.2 图片标签
<!--img 显示图片
src(必填):图片路径(分为相对路径和绝对路径(不懂百度),推荐相对路径)
title:作用:鼠标悬浮在图片上的时候显示的文字,当图片因为某些原因无法正常显示时,在显示图片的位置显示title中的文字
alt:与title作用相同,但有些浏览器不支持该属性.
width和height:设置宽高,设置之后可能使图片失真
-->
<img src="" title="" alt="" width="" height=""/>
5.3列表标签
一般用在导航上
5.3.1 无序列表和有序列表
两种列表用法基本一样,无序用得多
<!--ul是无序,ol是有序-->
<ul>
<li><=默认是个小圆点,可改</li>
<li>这是最好的时代</li>
<li>也是最坏的时代</li>
</ul>
<ol>
<li><=默认是个数字,可改</li>
<li>这是最好的时代</li>
<li>也是最坏的时代</li>
</ol>
- <=默认是个小圆点,可改
- 这是最好的时代
- 也是最坏的时代
- <=默认是个数字,可改
- 这是最好的时代
- 也是最坏的时代
5.4 定义描述标签
一般用在图文混编的场景中。
<dl>
<dt>热狗</dt>
<dd>好吃</dd>
<dd>想吃</dd>
</dl>
-
热狗
- 好吃
- 想吃
5.5 布局标签div(可设置宽高,是一块区域)
一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局。
5.6 标签分类
html标签可以分为块状元素和行级元素两类。
块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；
行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。
PS:区分的简单方法：是否独占一行。
块状元素和行内元素的区别：
-
1.块级元素会独占一行，其宽度自动填满其父元素宽度;行内元素会排列到同一行里，其宽度随元素的内容变化而变化。
-
2.块级元素可以设置宽高；行内元素设置宽高无效。
-
3.块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果。
标签分类：
属于块状元素的：
标题标签 h1-h6,
段落标签 p ,
水平线标签 hr,
有序列表标签 ol--li，
无序列表标签 ul--li，
定义描述标签 dl-dt-dd，
容器标签 div：
属于行级元素的：
范围标签：span
图像标签：img
6 超链接
超链接标签一般有两个作用： 1 、用来实现页面间的跳转 2 、实现锚链接功能
6.1 页面间的跳转
<a href="" target="">这几个字就是一个超链接,点击跳转</a>
6.2 锚链接
<a href="top">顶部</a>
内容,内容.....(当内容超过一页屏幕时才能看出效果)
<a href="#top" >回到顶部</a>
当一个页面长度超过一屏的时候，想迅速跳转到指定位置，例如大家经常浏览网页的时候，滑动超过一屏，右下角经常会出现返回顶部连接，这个就是锚链接实现的。这个定位可以实现本页面间的锚链接也可以实现不同页面间的锚链接。
7 表格标签
<!-- table:定义表格
常用属性:heigh:高度
width:宽度(可以用百分比)
border:边框(粗细,单位:px)
cellpadding:内容与单元格之间的距离(类似padding)
cellspacing:单元格与单元格之间的距离(类似margin)
colspan="3":跨3列
rowspan="3":跨3行
-->
<table border="1" cellpadding="0" cellspacing="0" width="90%" height="200px">
<!-- tr定义行,有几个就有几行,td定义列,若是规则表格以最多的列为准,不规则要设置跨行跨列-->
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td colspan="2">第三行跨2列(所以只有1列)</td>
</tr>
<tr>
<td rowspan="2">第四行第一列跨2行</td>
<td>第四行第二列</td>
</tr>
<tr>
<td>第五行第二列(只有第2列,第1列被第四行第一列占了)</td>
</tr>
</table>
自动动手试试,光看是学不会的
8 表单form
概念：用于采集用户输入的数据。用于和服务器进行交互。
表单项元素
<!-- id: 表单元素的唯一标识,名字不可重复
name: 表单元素的名称,很重要,提交数据到服务器后,
服务器获取该数据的时候使用的name,类似属性名或者key
value: 表单项元素的值,服务器获取数据通过name获取到value
action: 指提交到index.html页面 -->
<!-- get 不安全,信息包含在请求行中
http://127.0.0.1:5500/index.html?
uaerName=%E5%B0%8F%E6%98%8E&
password=123456&
gender=%E7%94%B7&
status=0&
hobby=sing&hobby=dance&hobby=rap&hobby=basketball&
headImg=game.ico&
birthday=2021-08-11&option=2 -->
<!-- get:
1.请求参数会在地址栏中显示.会封装到请求行中
2.请求参数大小是有限制的
3.不太安全-->
<!-- post:
1.请求参数不会在地址栏中显示.会封装到请求体中
2.请求参数大小没有限制(理论上没有限制)
3.较为安全-->
<!-- autocomplete自动完成,但好像没鸟用,好像和google保存账户一样 -->
<form action="index.html" method="post" enctype="multipart/form-data" autocomplete="on">
<!-- 用户不关心,但对程序员很重要 -->
隐藏域: <input type="hidden" name="userId" value="1001">
name: <input type="text" name="uaerName" autocomplete="on"/><br>
<!-- required 必需要的 -->
password: <input type="password" name="password"autocomplete="on" required><br>
<!-- 同一个name说明是同一组单选按钮 value就是提交给后台的 checked默认选择-->
gender: <input type="radio" name="gender" value="男" checked>男
<input type="radio" name="gender" value="女">女
<input type="radio" name="gender" value="未知">未知<br>
marital status:<input type="radio" name="status" value="1">已婚
<input type="radio" name="status" value="0" checked>未婚<br>
hobby: <input type="checkbox" name="hobby" value="sing"> 唱歌
<input type="checkbox" name="hobby" value="dance"> 跳
<input type="checkbox" name="hobby" value="rap"> rap
<input type="checkbox" name="hobby" value="basketball"> 篮球<br>
photo: <input type="file" name="headImg"autocomplete="on">文件类型<br>
birthday: <input type="date" name="birthday">日期
<input type="datetime-local"><br>
<!-- disabled="disabled" 禁用 -->
<select name="option" id="option"autocomplete="on" >
<option value="1">1</option>
<option value="2">2</option>
</select><br>
<!-- readonly 只读 -->
protocol: <textarea readonly disabled cols="30" rows="10">1
1.11111111111
jjf
</textarea><br>
<input type="submit" value="注册">
<input type="reset" value="重置">
<input type="button" value="按钮">
<!-- 图片按钮 -->
<input type="image" src="E:\html\web\images\game.ico" alt="鼠标悬停时显示的字和title一样的作用,有些不支持alt">
<br>
<button type="submit">注册</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
<input >
</form>
表单项元素中的一些属性：
id:元素的唯一表示，不重复
name:表单项元素的名称，很重要，提交数据到服务器之后，服务器通过该名称获取数据
value:表单项元素的值，服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class:表示样式名称
readonly:表示只读，用户只能看不能改
disabled：表示禁用，该元素不能改而且背景是灰色
地址栏内容(用get提交会有类似如下的字符串,key=value的形式以&号分隔键值对,不安全)：
http://127.0.0.1:5500/index.html?
uaerName=%E5%B0%8F%E6%98%8E&
password=123456&
gender=%E7%94%B7&
status=0&
hobby=sing&hobby=dance&hobby=rap&hobby=basketball&
headImg=game.ico&
birthday=2021-08-11&option=2
9 常用的布局组合标签
div-ul-li/div-ol-li：常用于导航布局
div-dl-dt-dd:常用于图文混编布局
div-form:常用于表单布局
div-table:常用于局部规则数据展示布局
10 音频
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">您的浏览器不支持Video标签。
</video>
<video> 元素提供了播放、暂停和音量控件来控制视频。同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸。
如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，
浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频音频</title>
</head>
<body>
<h1>音频</h1>
<audio controls>
<source src="audio/wgs.ogg" type="audio/ogg">
<source src="audio/zjl.mp3" type="audio/mpeg">您的浏览器不支持 audio 元素。
</audio>
<h1>视频</h1>
<video width="1320" height="640" controls><source src="audio/ruhai.mp4" type="video/mp4">
<source src="audio/wgs.ogg" type="video/ogg">您的浏览器不支持Video标签。
</video>
</body>
</html>
补充–HTML中的转义符号
转移符号 描述
转义为空格
< 转义为小于号<
≤ 转义为小于等于号≤
> 转义为大于号>
≥ 转义为大于等于号≥
© 转义为版权符号 ©
688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
