前端学习第一天-HTML学习
简介
HTML即Hyper Text MarkUp Language （超文本标记语言），专门用来设计和编辑网页。超文本指处理文本，还能使用音频、视频、图片，链接等等，标记语言指通过标签来定义。
HTML发展史
HTML的发展历程可以追溯到1990年代初，当时HTML的初始版本被设计为一种简单的标记语言，用于描述网页的结构和内容。随着互联网的快速发展，HTML也在不断演进和完善。以下是一些关键的时间节点和发展历程：
HTML的初始版本：1990年代初，HTML的初始版本被开发出来，主要用于描述网页的结构和内容。它使用各种标签来标记文本、链接、图片等元素。
HTML 2.0：1995年，HTML 2.0成为互联网工程工作小组（IETF）发布的标准，对HTML进行了标准化和规范化。这个版本增加了更多的标签和功能，使得网页设计更加丰富和灵活。
HTML 3.2：1997年1月14日，HTML 3.2成为万维网联盟（W3C）推荐标准。这个版本进一步扩展了HTML的功能，包括对多媒体内容的支持和对样式表的初步支持。
HTML 4.0：1997年12月18日，HTML 4.0成为W3C推荐标准。这个版本引入了更多的标签和功能，同时加强了对样式表和脚本的支持，使得网页设计和开发更加灵活和强大。
XHTML：在HTML 4.0的基础上，W3C于2000年发布了XML版本的HTML，即XHTML。XHTML是一种基于XML的标记语言，对HTML进行了严格的规范化和标准化。它要求所有标记必须正确嵌套且必须关闭，这有助于提高网页的可靠性和可访问性。
HTML5：为了满足不断发展的互联网需求，HTML5开始制定并于2014年10月28日成为W3C推荐标准。HTML5引入了许多新的元素、属性和APIs，使得网页设计更加丰富、交互性和动态性。例如，它支持音频和视频元素、画布元素、地理位置API、离线存储等。
知识点
HTML基本网页结构
<!--以下为H5结构-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
其中各标签的功能如下：
<!DOCTYPE html>：这是文档类型声明，用来将文档声明为 HTML 文档（从技术上来说它并不是标签），doctype 声明不区分大小写；
<html> </html>：该标签是 HTML 页面的根标签，其他所有的标签都需要在 <html>和 </html>标签之间定义；
<head> </head>：该标签中用来定义 HTML 文档的一些信息，例如标题、编码格式等等；
<meta charset="UTF-8">：用来指明当前网页采用 UTF-8 编码，UTF-8 是全球通用的编码格式，绝大多数网页都采用 UTF-8 编码；
<title> </title>：该标签用来定义网页的标题，网页标题会显示在浏览器的标签栏；
<body> </body>：该标签用来定义网页中我们能通过浏览器看到的所有内容，例如段落、标题、图片、链接等等；
HTML标签分类
按写法分类
HTML按标签写法分类可以分为单标签和双标签。
常用单标签较少，例如meta、hr水平线、br换行、img图片，input 输入框。
双标签由开始标签和结束标签组成，通过是否有/区分，例如<head></head>。
按display(展示效果)分类
HTML按标签写法分类可以block(块级标签)，inline（行内标签），inline-block（行内块级标签）。
block类标签有着独占一行，可以设置长宽的特点，常见的块级标签如下
标题标签：h1-h6 效果：加粗，上下间距
段落标签：p 效果：上下间距
水平线：<hr/>
换行：<br/>
布局标签：div、header、footer、nav、section、aside
inline类标签有着不会换行，设置长宽无效的特点，常见的行内标签如下
范围标签：span
加粗标签：b、strong
斜体标签：i、em
下划线：u、ins
删除线：s、del
超链接： a
<a href="跳转目标位置" target="目标网页打开的方式" title="点击跳转百度">百度一下</a>
相对路径：
目标文件在下一级目录 目录名称/文件名称
目标文件在上一级目录 ../文件名称
target :默认_self 在当前窗口打开
_blank 新窗口打开
锚点链接： 在当前页面中自己进行跳转
<a href="#top">点击回到顶部</a>
<div id="top">top</div>
inline-block类标签有着不会换行，可以设置长宽的特点，常见的行内标签如下
多媒体标签：<img/>图片、audio音频、video视频
<img src="img/2.jpg" alt="" width="100px">
src="图片来源"
alt="当src没有图片来源定义的提示文本"
注意：style="vertical-align: 默认bottom，中间对齐middle，顶部对齐top;"
表单中的控件：<input/>、select、textarea
按钮：button
滚动标签：marquee
常用标签及效果
列表标签
有序：ol 列表项li
无序：ul 列表项li
ol和ul中都有一个type属性
ol中：type有5个值，默认1，A、a、I、i
ul中：type有3个值，默认disc实心圆，circle空心圆、square实现正方形
<ol type="1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
- 1
- 2
- 3
- 4
- 5
<ul type="disc">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
- 1
- 2
- 3
- 4
- 5
表格标签
table声明表格
tr表格中的行
td 表格单元格，里边可以写任意内容
th 表格标题单元格，加粗且居中
caption 表格的标题
thead 表格头部
tbody表格主体
tfoot表格底部
常用属性：
html <table border="1" width="700px" align="center" cellspacing="0" cellpadding="5px">
td常用属性：colspan跨列 rowspan跨行，无论跨行还是跨列记得删除被跨的单元格
效果：
<body>
<table border="1" cellspacing="0" width="300px" align="center" style="text-align: center;">
<caption>课表</caption>
<thead>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
</tr>
</thead>
<tbody>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>体育</td>
</tr>
<tr>
<td>数学</td>
<td>英语</td>
<td>体育</td>
<td>语文</td>
</tr>
<tr>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td colspan="2">跨行</td>
<td rowspan="2">跨列</td>
<td>语文</td>
</tr>
<tr>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
</tbody>
</table>
</body>
| 周一 | 周二 | 周三 | 周四 |
|---|---|---|---|
| 语文 | 数学 | 英语 | 体育 |
| 数学 | 英语 | 体育 | 语文 |
| 语文 | 语文 | 语文 | 语文 |
| 跨行 | 跨列 | 语文 | |
| 语文 | 语文 | 语文 | |
表单标签
声明表单form
form中属性 action=“表单提交位置” method=“表单提交方式”
get\post区别：
get请求会将信息展示在浏览器地址栏中，不安全，而且提交内容有长度限制
post请求不会将信息展示在浏览器地址栏中，相对安全，没有提交内容有长度限
常用的控件
<input/>输入框
type="text\password\submit\reset"
<body>
<form action="" method="">
<input type="text" value="李华"><br>
<input type="password" value="123"><br>
<input type="submit">
<input type="reset">
</form>
</body>
select下拉列表
<option value="后台服务器">用户查看</option>
optgroup给选项进行分组，使用label属性给分组命名
<optgroup label="00后">
<select name="" id="">
<optgroup label="机器语言">
<option value="1">JAVA</option>
<option value="2">Python</option>
</optgroup>
<optgroup label="自然语言">
<option value="3">汉语</option>
<option value="4">英语</option>
</optgroup>
</select>
datalist数据列表
注意：单独使用没有效果需要结合input输入框
<input type="text" list="city">
<datalist id="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</datalist>
fieldset组合按钮
<fieldset style="width: 200px;">
<legend>天霸动霸tua</legend>
</fieldset>
textarea文本域
<textarea name="" id="" cols="30" rows="10">你好</textarea>
label 关联标签
一般用于文字和控件选项进行关联
可以有两种用法：
①将文本和控件input直接放入label标签中，去掉for属性
<label><input type="radio" name="sex" value="0">男</label>
②将文本放入label标签中，将for属性和input控件中的id属性对应
<input type="radio" name="sex" value="1" id="nv">
<label for="nv">女</label>
常用控件中属性
input中常用属性：
id、name、value、min、max、checked、maxlength、placeholder、disabled 不可操作
readonly只读、size更改input的宽度（1-7）
type属性：规定input属性框的类型
type的值：默认text文本框、密码框password、单选框radio、复选框checkbox、
隐藏框hidden、文件上传file、邮箱email、电话tel、搜索search、路径url、
数值框number、数值滑块range、日期和时间：date、datetime-local、time 、week
拾色器：color；
提交按钮submit、重置按钮reset、普通按钮button
HTML标签之间的关系
同级关系（兄弟关系）
嵌套关系（父子关系）
HTML5新增标签
HTML5自带JS的动态效果
marquee常用属性
behavior:scroll默认、alternate两端开会滚动、slide只滚动一次后停止
direction：滚动方向 默认left向左、right向右、up向上、down向下
loop:
scrollamount:
HTMl标签中的属性
位置：写在开始标签中
写法：使用=连接 属性名称="属性值"
假如属性有多个，那么属性和属性之间使用空格分隔即可
常用属性
<div id="" class="" title="" style="">张越 </div>
属性值：可以自己定义
规范：由字母数字_$组成，不建议数字开头、不建议使用中文
因为style属性实际上是css行内的引入方式，值比较特殊
style="width:100px;height:100px;color:red;background-color:aqua;font-size:45px;"
HTML5注释
解释说明代码而且不被程序所解析
<!-- 注释内容 -->
实现布局：
宽 width
高 height
边框 border:1px solid black;
外边距：
margin-left:左外边距
margin-top:上外边距
margin-right:右外边距
margin-bottom：下外边距
让块元素在浏览器上居中:
margin:auto;
扫一扫
3108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
