写在前面的话: 新的系列----前端基础入门,一起学习,一起加油
一. 初识HTML
页面是由三部分组成 html，css ，js组成
html就是人的一个骨架
css就是给人穿衣服
js就是让人能有一些动作行为
1. 什么是HTML语言?
https://baijiahao.baidu.com/s?id=1687402216070648268
1.1 介绍:
1. HTML指的是超文本标记语言(Hyper Text Marked Language)是一种标识性的语言。它包括一系列标记标签，通过这些标记标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
2. 标签: HTML标签也可以称为元素，不同的标签有不同的功能解释，用来表示不同的功能。每个标签都是由一对尖括号包裹的单词组成。 一般的标签是成对出现的，一般称第一个标签是开始标签，第二个是结束标签。开始和结束标签也称为开放标签和闭合标签。
3. W3C: HTML由 W3C制定的，W3C(World Wide Web Consortium)是一个非盈利性组织。在中国的北京航空航天大学设有分部
2. 常见标签
标签简介:
<!-- 标签基本上是成双成对的 开始标签 结束标签 -->
<!-- 标签不区分大小写,默认小写 -->
<!-- 自闭和标签,单个标签组成 -->
1. 块级标签
布局: 从上而下 独占一行
宽度: 取决于浏览器宽度
嵌套(包含): 块级标签包含其他元素
标题标签 h1 -- h6
段落标签 p
表格标签 table tr:行 td:单元格 th:表头 caption:表格名 cellspacing="0“ 清除表格线
有序列表 ol
无序列表 ul
表单标签 form
盒子标签 div 设置宽高 边框:颜色 宽度 线条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级标签</title>
</head>
<body>
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
<p>hello world!!</p>
<p>xz
<span>18</span>
</p>
<p>------------------------------------------------------------</p>
<span>xz
<p>18</p>
</span>
<p>------------------------------------------------------------</p>
<!-- 属性只能卸载开始标签里面 或者单标签里面 结束标签不能写属性 -->
<!-- 无序列表 -->
<ul>
<li>猕猴桃</li>
<li>西瓜</li>
<li>香蕉</li>
</ul>
<!--有序列表-->
<ol type="A">
<li>可乐</li>
<li>牛奶</li>
<li>咖啡</li>
</ol>
</body>
</html>
1.1 长沙一周天气表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长沙一周天气</title>
</head>
<body>
<table style="width: 500px;height: 30px; text-align: center;" border="1" cellspacing="0" >
<caption>长沙一周天气报表</caption>
<tr>
<th>城市</th>
<th>日期</th>
<th>天气</th>
<th>温度</th>
<th>湿度</th>
</tr>
<tr>
<td>长沙</td>
<td>周一</td>
<td><img src="../img/tianqi/baoyu.png" alt="图片加载失败"></td>
<td>11<sup>o</sup>~18<sup>o</sup></td>
<td>71%</td>
</tr>
<tr>
<td>长沙</td>
<td>周二</td>
<td><img src="../img/tianqi/dawu.png" alt="图片加载失败"></td>
<td>14<sup>o</sup>~18<sup>o</sup></td>
<td>65%</td>
</tr>
<tr>
<td>长沙</td>
<td>周三</td>
<td><img src="../img/tianqi/daxue.png" alt="图片加载失败"></td>
<td>13<sup>o</sup>~18<sup>o</sup></td>
<td>66%</td>
</tr>
<tr>
<td>长沙</td>
<td>周四</td>
<td><img src="../img/tianqi/dayu.png" alt="图片加载失败"></td>
<td>12<sup>o</sup>~19<sup>o</sup></td>
<td>74%</td>
</tr>
<tr>
<td>长沙</td>
<td>周五</td>
<td><img src="../img/tianqi/qingtian.png" alt="图片加载失败"></td>
<td>8<sup>o</sup>~15<sup>o</sup></td>
<td>71%</td>
</tr>
</table>
</body>
</html>
1.2 个人简介表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人简介</title>
</head>
<body>
<table style="width: 500px;height: 30px; text-align: center;" border="1" cellspacing="0" >
<caption>个人简介表</caption>
<tr>
<!--合并行 colspan-->
<!--合并后要对应删除-->
<td colspan="5">个人简历</td>
</tr>
<tr>
<td>姓  名</td>
<td></td>
<td>性  别</td>
<td></td>
<td rowspan="4"></td>
<!--合并列 rowspan-->
</tr>
<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>
</table>
</body>
</html>
2.内联标签
布局: 从上而下 浏览器可视化窗口放不下 就会换行
宽度: 取决于内容宽度
嵌套(包含): 内联标签只能容纳文本 或者其他内联标签
超链接标签 a
target="_blank" 新开一个页面
锚点功能
<a href="#bottom" name="top">回到底部</a>
<a href="#top" name="bottom">回到顶部</a>
input 表单常用标签
img 图片标签 <img src="路径" alt="图片加载失败">
相对路径 层级: 上一级 ../
同层级 ./
下一级 /
绝对路径 从磁盘cv
网络路径 从网页cv
sub 向下显示
sup 向上显示,可用于摄氏度/数学公式
textarea 文本标签
span span标签是纯文本，配合CSS则可以展示不同效果
2.1 input常用type属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--表单-->
<!--get请求: 安全系数不高 一般是从服务器端获取数据-->
<!--post请求: -->
<form action=" " method="">
<!--前后端数据交互-->
<!--针对用户输入的 要定义name属性-->
<!--针对用户选择的 要定义value属性-->
<!--输入框-->
<input type="text" name="wd"><br>
<!--密码框-->
<input type="password" name="pwd" placeholder="请输入密码"><br>
<!--单选框-->
<!--针对单选框和多选框 name值一致的唯一组-->
<!--默认选择-->
<input type="radio" name="sex" value="man" checked>男
<input type="radio" name="sex" value="women">女
<input type="radio" name="sex" value="none">未知<br>
<!--多选框-->
<input type="checkbox" name="fruit" value="mht">猕猴桃
<input type="checkbox" name="fruit" value="xj">香蕉
<input type="checkbox" name="fruit" value="pt">葡萄 <br>
<!--下拉框-->
<!--selected 默认选择-->
<select name="" id="">
<optgroup label="中国">
<option value="" selected>湖南省</option>
<option value="">湖北省</option>
<option value="">广东省</option>
</optgroup>
</select><br>
<!--文本框-->
<textarea cols="10" rows="20">
</textarea><br>
<!--文件-->
<input type="file" name="flie" value="file1">
<!--重置-->
<input type="reset" >
<!--隐藏-->
<input type="hidden" value="010086">
<!--submit 触发提交的事件 -->
<input type="submit" value="登录">
</form>
</body>
</html>
2.2 input属性
1.name: 表单与后台交互时最重要的一个属性，要求input标签都带上表单提交项的键， 与id不同，name属性是和服务器通信时使用的名字，而id属性是浏览器端使用的名字，该属性主要方便客户编程而在css和js中使用.
2.value: 表单提交项的值 。input的值，单选多选下拉框必须设置value属性，这样后台才能获得你选中的到底是哪个或哪几个选项
3.其他: placeholder： 提高用户体验度
readonly：只读
disabled：禁用
<!--针对用户输入的 要定义name属性-->
<!--针对用户选择的 要定义value属性-->
2.3表单其他标签
1.fieldset: 给表单设置分组
2.legend: 设置分组表单的标题
3.label: 提高用户体验度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单拓展</title>
</head>
<body>
<form action="">
<fieldset>
<legend>用户信息</legend>
<label for="uid">用户名</label>
<input type="text" name="user" id="uid" placeholder="请输入用户名"><br>
<label for="upd">密 码</label>
<input type="password" name="pwd" id="upd" placeholder="请输入密码">
</fieldset>
<!--readonly 只读-->
<!--disabled 禁用-->
<input type="text" value="hello" readonly>
<input type="text" value="hello" disabled>
<!--视频标签-->
<!--autoplay 自动播放-->
<!--muted 静音-->
<!--loop 循环播放-->
<video style="width: 500px;height: 600px" controls autoplay muted >
<source src="../img/111.mp4" type="video/mp4">
</video>
<!--音频标签-->
<audio controls>
<source src="../img/111.mp3" type="audio/mpeg">
</audio>
</form>
</body>
</html>
3.文本格式化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
</head>
<body>
<!--加粗-->
<b>111</b>
<strong>111</strong>
<!--下划线-->
<u>222</u>
<ins>222</ins>
<!--斜体-->
<i>333</i>
<em>333</em>
<!--删除线-->
<s>444</s>
<del>444</del>
</body>
</html>
3.HTML转义
4.练手习题
3314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
