HTML学习
1. 网站与网页
网站为网页的集合,一个网页通过HTML构建。
网页通过视频,图片,文字等元素构成,以
.
h
t
m
l
.html
.html或
.
h
t
m
.htm
.htm文件生成
1.1 HTML
超文本标记语言(Hyper Text Markup Language)
作为标记语言(makrup tag),为标签的集合
1.2 浏览器与内核
内核:渲染引擎,读取网页内容,计算网页显示方式
1.3 Web标准
统一化展示
包含:
结构(structure):网页元素整理分类,HTML
表现(Presentaton):板式,颜色,动效,外观样式,CSS
行为(Behavior):交互,响应,JS
2. HTML
2.1 标签关系
包含关系:
<head>
<title></title>
</head>
并列关系:
<head></head>
<body></body>
2.2 基本结构标签(骨架标签)
<html> 根标签
<head> 文档头部
<title> 文档标题
<body> 文档主体
<html>
<head>
<title>标题部分</title>
</head>
<body>
主体部分
</body>
</html>
2.3. 一些初始化标签
<!DOCTYPE html>:声明当前页面为HTML5,在<html>上面位置
<html lang=“en”>:英文,zh-CN为中文,在有些浏览器,可以调用翻译接口
<meta charset = “UTF-8”>:网页字符集
2.4 常用标签
2.4.1 标题标签 <h1> - <h6>
存在6个等级的标签,等级越高,字体越大,字体越粗,独占一行,写在body中
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
</body>
2.4.2 段落标签 <p> 换行标签 <br />
段落标签:根据浏览器大小自动换行,段落间存在间隙
换行标签:单标签,break,没有间隙
2.5 文本格式化标签——面向文字
2.5.1 加粗 <strong> <b>
<body>
<strong>加粗</strong>
<b>加粗2</b>
</body>
2.5.2 倾斜 <em> <i>
<body>
<em>倾斜</em>
<i>倾斜2</i>
</body>
2.5.3 删除线 <del> <s>
<body>
<del>删除线</del>
<s>删除线2</s>
</body>
2.5.4 下划线 <ins> <u>
<body>
<ins>下划线</ins>
<u>下滑2</u>
</body>
2.6 容器布局标签
2.6.1 跨行 <div>
分割分区,一行只能一个div
<body>
<div>第一行</div>第一行2
<div>第二行</div>第二行2
</body>
2.6.2 跨距 <span>
跨度,一行可以放多个
<body>
<div>第一行</div>第一行2
<div>第二行</div>第二行2
<span>first</span>
<span>second</span>
<span>third</span>
</body>
2.7 图像标签
2.7.1 图像标签 <img>
单标签,src不能有空格
修改宽度或者高度,按比例缩放
同时修改宽度和高度,不等比例缩放
border一般用CSS设定,不建议设定的在VScode中为白色
键值对赋值 属性= “属性值”
路径:下一级 /文件夹。 上一级 …(俩点)/文件夹
网络路径也可以
<body>
<img src="图像url(路径)" alt="图片无法显示时显示的文本" title="鼠标放在图像提示的文字"/>
<img src="图像url(路径)" width="宽" height="高" border="边框粗细"/>
</body>
2.7.2 超链接 <a>
anchor
必须href:目标地址,http://或https://开头
必须target:_self 本窗口打开,_blank 新窗口打开
- 外部连接:与外部网页的链接,如
http://www.baidu.com
- 内部连接:本地项目内的网页,如
another_page.html
- 空连接:
href="#"
- 下载连接:地址连接的是文件,如
href ="压缩包url路径"
必须压缩包? - 文件连接:所有的图片,视频均可做连接,会新窗口打开,不会下载,
href ="文件url路径"
- 内部锚点连接,CSDN博客开头的那玩意儿。
href = "# two"
然后在标题上<h3 id="two">
<body>
<a href="跳转目标" target="目标窗口弹出方式"> 链接的方式,文本或图像 </a>
<a href="https://www.baidu.com" target="_blank"> <img src="xxx.png" /> </a>
<a href="图片1.zip" > 下载 </a>
<a href="#two"> 锚点跳转标题two </a>
<h3 id="two">标题two</h3>
</body>
2.8 注释标签与特殊字符
2.8.1 注释 <!–注释–>
ctrl + /
<body>
<!-- 注释 -->
</body>
2.8.2 特殊字符,空格等
 
空格
<>
<>
3. HTML 列表
3.1 表格标签 <table> 行 <tr> 单元格 <td>
表格的主要作用:显示,展示数据
<body>
<table><!--table最外面-->
<tr><!--行-->
<td>11</td><!--行内单元格-->
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</table>
</body>
3.2 表头单元格<th>
表头加粗,居中
<body>
<table>
<tr>
<th>头1</th><!--表头-->
<th>头2</th>
<th>头3</th>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</table>
</body>
3.3 表格属性 建议CSS
- 写在
<table>
后,作为属性 align
位置,left,right,center
border
,边框,1或""
,有或无cellpadding
,文字与单元格的距离,默认1像素
cellspacing
,单元格之间的距离,默认2像素
width
与height
,宽与高
3.4 表格的结构化标签<thead> <tbody>
还是必须在<table>里面
将表头<th>行部分划到<thead>里面
剩余部分划分到<tbody>中
<body>
<table>
<thead>
<!-- 表头部分 -->
<tr>
<th>头1</th>
<th>头2</th>
<th>头3</th>
</tr>
</thead>
<tbody>
<!-- 表体部分 -->
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</tbody>>
</table>
</body>
3.4 合并单元格 补充在单元格内
- 跨行合并,
rowspan="合并数目"
,补充在最上边的单元格,向下合并 - 跨列合并,
colspan="合并数目"
,补充在最左边的单元格,向右合并
<body>
<table width="500" height="300" border="1" cellspacing="0">
<tr>
<th colspan="2">头1</th>
<!--跨列合并一个,一个顶两个-->>
<th rowspan="2">头2</th>
<!-- 跨行合并,原来第二行第三列的没有了 -->
</tr>
<tr>
<td>21</td>
<td>22</td>
<!-- <td>23</td> -->
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</body>
4. HTML 列表
用来确定布局
- 无序列表
- 有序列表
- 自定义列表
4.1 无序列表(※)<ul> <li>
- 无顺序排序,先<ul>后<li>
- <ul>里面只能放<li>
- <li>里面可以随便放
- <li>自带样式,点
<body>
<!-- 无序列表 -->
<ul>
<!-- 列表中小例 -->
<li>第一小例</li>
<li>第二小例</li>
<li>第三小例</li>
</ul>
</body>
4.2 有序列表 <ol> <li>
- 有顺序排序,先<ol>后<li>
- <ol>里面只能放<li>
- <li>里面可以随便放
- <li>自带样式,顺序符号123
4.3 自定义列表(※)<dl> 定义条目 <dt> 定义描述 <dd>
- 定义条目与定义描述并列
- 空格结构由CSS确定
- <dl>只能包含<dt>与<dd>
- <dt>与<dd> 可以包含所有
- 一般<dd> 用来描述<dt>
<body>
<!-- 自定义列表 -->
<dl>
<!-- 自定义条目 -->
<dt>自定义条目头</dt>
<!-- 定义描述 -->
<dd>第一小例</dd>
<dd>第二小例</dd>
<dd>第三小例</dd>
</dl>
</body>
5. 表单
用途:收集用户信息
组成:一个表单由表单域,表单控件(表单元素)与提示信息构成
5.1 表单域 <form>
包含表单所有元素的区域
目的: 收集信息提交到后台服务器
属性:
- action, 提交到的后台URL
- mehod, 传送方式, GET/POST
- name, 表单域名称
<body>
<form action="提交后台服务器" method="GET" name="form1"></form>
</body>
5.2 表单元素
5.2.1 input输入表单元素 <input>
- 单标签
- 存在type属性,指定不同的类型
- 多选一,需要<input>相同的
name
属性,同时type="radio"
,例如:sex。 - <input>可以持有name属性
type="checkbox"
,name
相同的情况下,也可以多选
<body>
<form action="提交后台服务器" method="GET" name="form1">
文本框 <br/>
<!-- 文本输入 -->
用户名: <input type="text" name="username"/> <br/>
<!-- 密码输入 -->
密码: <input type="password" name="passwords"/><br/>
<!-- 选择按钮radio 多选一必须有相同的name -->
性别:男<input type="radio" name="sex" /> 女<input type="radio" name="sex" /><br />
<!-- 复选框 可以实现多选 -->
同意注册条款 <input type="checkbox" />
</form>
</body>
5.2.2 <input>的属性name与value
- 多选一,需要<input>相同的
name
属性,同时type="radio"
,例如:sex。 - <input>可以持有name属性
type="checkbox"
,name
相同的情况下,也可以多选value
未输入情况下的默认值,只有文本框展示,主要是给后台进行默认操作的- 使用
name
区分不同的表单
<body>
<form action="提交后台服务器" method="GET" name="form1">
文本框 <br/>
<!-- 文本输入 -->
用户名: <input type="text" name="username" value="请输入用户名"/> <br/>
<!-- 密码输入 -->
密码: <input type="password" name="passwords" value="123456"/><br/>
<!-- 选择按钮radio 多选一必须有相同的name -->
性别:男<input type="radio" name="sex" value="男"/> 女<input type="radio" name="sex" value="女" /><br />
<!-- 复选框 可以实现多选 -->
同意注册条款 <input type="checkbox" />
</form>
</body>
5.2.3 <input>的属性checked与maxlength
- checkede选项,主要为了单选按钮
radio
与复选框checkbox
,打开时,默认选中check="checked"
的选项,例如:radio加在男上面就选择男 - 确定最大长度,例如
text
的用户名最大20字符。maxlength="20"
5.2.4 <input> 提交属性submit 与重置按钮reset
type="submit"
提交所有元素到后台服务器type="reset"
重置所有元素内容
5.2.5 <input> 按钮button 文件上传 file
- 按钮后期结合JS进行使用
- 文件域, 上传文件用
<body>
<form action="提交后台服务器" method="GET" name="form1">
<input type="button" value="获取验证码" />
<input type="file" />
</form>
</body>
5.3 下拉表单元素 <select> <option>
- <select> 为父标签,其字标签为<option>
- 在
option
使用select="selected"
设置默认选项
<body>
<form action="提交后台服务器" method="GET" name="form1">
<!-- 下拉选择 -->
<select>
<option>北京</option>
<option selected="selected">上海</option>
<!-- 处于默认选择状态 -->
<option>广东</option>
<option>深圳</option>
</select>
</form>
</body>
5.4 文本域 <textarea>
- 输入大量的数据的情况使用
- 默认的文字通过在双标签内写出
cols
与rows
决定行和列的尺寸,但是通过之后CSS决定
<body>
<form action="提交后台服务器" method="GET" name="form1">
<textarea cols="50" rows="5">
<!--大量文本数据-->
这是默认的内容
</textarea>
</form>
</body>
6. 标签 <label>
- 用于绑定表单元素,当点击<input> 中的文本时,浏览器会自动选中对应的表单上
label
的for
属性,对应input
的id
属性
<body>
<form action="提交后台服务器" method="GET" name="form1">
<!-- label绑定input -->
<label for="user"> 用户名:</label> <input type="text" name="username" id="user" /> <br/>
</form>
</body>
由于使用了label
使得用户名该文本与input
进行了绑定,所以点击用户名的位置,就能够将光标跳转输入文本框
7. 总结
只是简单的HTML学习笔记,一天草草学完的,还没有涉及到HTML5,以后可能会进行补充。个人学习用