HTML入门
HTML&CSS&JavaScript的作用
- HTML 主要用于网页主体结构的搭建
- CSS 主要用于页面元素美化
- JavaScript 主要用于页面元素的动态处理
什么是HTML
HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容。
什么是超文本
HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。
什么是标记语言
说HTML是一种『标记语言』是因为它不是像Java这样的『编程语言』，因为它是由一系列『标签』组成的，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。
- 双标签:标签是通过
一组尖括号+标签名的方式来定义的：
<p>HTML is a very popular fore-end technology.</p>
这个例子中使用了一个p标签来定义一个段落，<p>叫开始标签，</p>叫结束标签。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫文本标签体，也简称：标签体。
- 单标签
<input type="text" name="username" />
- 属性
<a href="http://www.xxx.com">show detail</a>
href=“网址” 就是属性，href是属性名，"网址"是属性值
HTML基础结构
1 文档声明
- HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本
- HTML4版本的文档类型声明是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
- HTML5版本的文档类型声明是：
<!DOCTYPE html>
- 现在主流的技术选型都是使用HTML5，之前的版本基本不用了。
2 根标签
- html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。
3 头部元素
- head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。
4 主体元素
- body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。
5 注释
- HTML注释的写法是
<!-- 注释内容 -->
html入门程序
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>hello vscode haha</h1>
</body>
</html>
- 效果
标题标签
标题标签一般用于在页面上定义一些标题性的内容，如新闻标题，文章标题等，有h1到h6六级标题
- 代码
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
- 效果
【注意】
超过h6的属于自定义标签，无效
- 代码
<body>
<h1>世界杯-塞尔维亚男篮大胜立陶宛进4强 博格丹21分</h1>
<h2>世界杯-塞尔维亚男篮大胜立陶宛进4强 博格丹21分</h2>
<h3>世界杯-塞尔维亚男篮大胜立陶宛进4强 博格丹21分</h3>
<h4>世界杯-塞尔维亚男篮大胜立陶宛进4强 博格丹21分</h4>
<h5>世界杯-塞尔维亚男篮大胜立陶宛进4强 博格丹21分</h5>
<h6>世界杯-塞尔维亚男篮大胜立陶宛进4强 博格丹21分</h6>
<h7>世界杯-塞尔维亚男篮大胜立陶宛进4强 博格丹21分</h7>
</body>
- 效果
段落标签
段落标签<p> </p>一般用于定义一些在页面上要显示的大段文字，多个段落标签之间实现自动分段的效果
- 代码
<body>
<p>
塞尔维亚队的博格达诺维奇得到21分和4个篮板，佩特鲁塞夫得到17分，
S-约维奇得到11分和5次助攻，米卢蒂诺夫和古杜里奇各得到9分。
立陶宛队的塞德科斯基斯得到14分和9个篮板，约库拜蒂斯得到13分和9次助攻，
瓦兰丘纳斯得到11分和4个篮板，布拉兹迪基斯得到11分和4个篮板。
</p>
<p>
开场的2平、8平后塞德科斯基斯连中两个三分球，立陶宛队以16-10领先。
博格达诺维奇上篮还击，瓦兰丘纳斯两罚回应，约维奇打3分成功率队连追5分，
塞尔维亚队追成28平。22平后约库拜蒂斯三分中的，古杜里奇突破得分，
首节结束时塞尔维亚队以24-25落后1分。
</p>
</body>
- 效果
换行标签
单纯实现换行的标签是<br>，如果想添加分隔线，可以使用<hr>标签
- 代码
<body>
工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。
<br>
国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。
<hr>
中国信息通信研究院测算，算力每投入1元，将带动3至4元的GDP经济增长。
</body>
- 效果
列表标签
- 有序列表
<ol> </ol> - 无序列表
<ul> </ul> - 列表项
<li> </li>
有序列表
- 代码
<body>
<!-- 有序 -->
<ol>
<li>数据类型</li>
<li>变量</li>
<li>流程控制</li>
<li>函数</li>
<li>面向对象</li>
</ol>
</body>
- 效果
无序列表
- 代码
<body>
<!-- 无序 -->
<ul>
<li>JAVA</li>
<li>C</li>
<li>C#</li>
<li>php</li>
<li>go</li>
<li>python</li>
</ul>
</body>
- 效果
嵌套
- 代码
<body>
<!-- 嵌套 -->
<ul>
<li>JAVA
<ol>
<li>数据类型</li>
<li>变量</li>
<li>流程控制</li>
<li>函数</li>
<li>面向对象</li>
</ol>
</li>
<li>C</li>
<li>C#</li>
<li>php</li>
<li>go</li>
<li>python</li>
</ul>
</body>
- 效果
超链接标签
超链接标签是点击后带有链接跳转的标签 ,也叫作a标签
- 代码
<body>
<!--
超链接标签
a
href 用于定义要跳转的目标资源的地址
1 完整的url http://www.atguigu.com/
2 相对路径 以当前资源的所在路径为出发点去找目标资源
./ 表示的当前资源的所在路径，可以省略不写的
../ 表示当前资源的上一层路径，需要时必须显示写出
3 绝对路径
无论当前资源在哪里，使用以固定的位置作为出发点去找目标资源
以 / 开头
target 用于定义目标资源的打开方式
_self 在当前窗口中打开目标资源
_blank 开启新窗口打开目标资源
-->
<a href="http://www.atguigu.com/" target="_blank">尚硅谷</a>
<!-- 相对路径写法 -->
<a href="02标题段落换行.html" target="_blank">02标题标签</a>
<a href="a/b/test.html" target="_blank">test</a>
<!-- 绝对路径写法 -->
<a href="/demo1-html/a/b/test.html" target="_blank">test</a>
</body>
<body>
<h1>this is a/test page</h1>
<a href="../../04超链接.html">返回</a>
<!-- 绝对路径 -->
<a href="/demo1-html/04超链接.html">返回</a>
</body>
- 效果
多媒体标签
img 图片标签（重点）
用于在页面上引入图片
- 代码
<body>
<!--
img
src 定义图片的路径
1 url
2 相对路径
3 绝对路径
title 定义鼠标悬停时提示的文字
alt 定义图片加载失败时提示文字
-->
<img src="img/111.jpg" width="300px" title="吉伊" alt="吉伊图片" />
<br>
<img src="/demo1-html/img/111.jpg" title="jiyi" alt="" />
</body>
- 效果
audio 声音标签
用于在页面上引入一段声音
- 代码
<body>
<!--
src
用于定义目标声音资源
autoplay
用于控制打开页面时是否自动播放
controls
用于控制是否展示控制面板
loop
用于控制是否进行循环播放
-->
<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
</body>
- 效果
video 视频标签
用于在页面上引入一段视频
- 代码
<body>
<!--
src
用于定义目标视频资源
autoplay
用于控制打开页面时是否自动播放
controls
用于控制是否展示控制面板
loop
用于控制是否进行循环播放
-->
<video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />
</body>
- 效果
表格标签(重点)
- 代码
<body>
<!--
table 整张表格
thead 表头
tbody 表体
tfoot 表尾
tr (table row)表格中的一行
td (table data)行中的一个单元格
rowspan 实现上下跨行
colspan 实现左右的跨列
th 自带加粗居中效果的td
-->
<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<table border="1px" style="margin: 0px auto;width: 400px;">
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>分数</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张小明</td>
<td>100</td>
<td rowspan="6">
前三名升职加薪
</td>
</tr>
<tr>
<td>2</td>
<td>李小黑</td>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>王小东</td>
<td>98</td>
</tr>
<tr>
<td>总人数</td>
<td colspan="2">200</td>
</tr>
<tr>
<td>平均分</td>
<td colspan="2">96</td>
</tr>
<tr>
<td>及格率</td>
<td colspan="2">80%</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
- 效果
表单标签(重点)
表单标签，可以实现让用户在界面上输入各种信息并提交的一种标签，是向服务端发送数据主要的方式之一
- 代码
<body>
<!--
form 表单标签
action 定义数据的提交地址
1 url
2 相对路径
3 绝对路径
method 定义数据的提交方式
GET
1 参数会以键值对形式放在ur1后提交 url?key=value&key=value&key=value
2 数据直接暴露在地址栏上，相对不安全
3 地址长度有限制，所以提交的数据量不大
4 地址上，只能是字符，不能提交文件
5 相比于post效率高一些
POST
1 参数默认不放到url后
2 数据不会直接暴露在地址栏上，相对安全
3 数据是单独打包通过请求体发送，提交的数据量比较大
4 请求体中，可以是字符，也可以字节数据，可以提交文件
5 相比于get效率略低一些
PUT
DELETE
...
表单项标签
表单项标签一定要定义name属性，该属性用于明确提交时的参数名
表单项还需要定义value属性，该属性用于明确提交时的实参
input
type 输入信息的表单项类型
text 单行普通文本框
password 密码框
submit 提交按钮
reset 重置按钮
radio 单选框 多个选项选其一
多个单选框使用相同的name属性值，则就会有互斥效果
checkbox 复选框 多个选项选多个
checked 默认选项
hidden 隐藏域 不显示在页面上,提交时会携带
file 文件上传框
readonly 只读 提交时 携带
disabled 不可用 提交时 不携带
textarea 文本域 多行文本框
select 下拉框
option 选项
selected 默认选项
-->
<form action="08welcome.html" method="get">
<!-- 添加表单项目标签 用户输入信息的标签 -->
<!-- 希望用提交一些特定的信息,但是考虑安全问题 或者是用户操作问题,不希望该数据发生改变 -->
<input type="hidden" name="id" value="123">
<input type="text" name="pid" value="456" readonly> <br>
<input type="text" name="pid" value="789" disabled> <br>
用户名：<input type="text" name="username"/> <br>
密码：<input type="password" name="userPwd"/> <br>
性别：
<input type="radio" name="gender" value="1" checked > 男
<input type="radio" name="gender" value="0" > 女
<br>
爱好：
<input type="checkbox" name="hobby" value="1" checked> 篮球
<input type="checkbox" name="hobby" value="2"> 足球
<input type="checkbox" name="hobby" value="3"> 羽毛球
<input type="checkbox" name="hobby" value="4"> 乒乓球
<br>
个人简介：
<textarea name="intro" style="width: 300px;height: 200px;" ></textarea>
<br>
籍贯：
<select name="pro">
<option value="1">京</option>
<option value="2">津</option>
<option value="3">冀</option>
<option value="0" selected>-请选择-</option>
</select>
<br>
选择头像：
<input type="file">
<br>
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
</form>
</body>
- 效果
布局相关标签
- 代码
<body style="background-color: cadetblue;">
<!--
css 设置样式的
通过元素的style属性进行设置
style = "样式名:样式值;样式名:样式值;......"
块元素：自己独占一行的元素 块元素的CSS样式的宽 高等等 往往都是生效的
div h1-h6
行内元素：不会自己独占一行的元素 行内元素的CSS样式的宽 高等等 很多都是不生效的
span img
-->
<div style="border: 1px solid red;width: 500px;height: 200px;margin: 10px auto;background-color: antiquewhite;">123</div>
<div style="border: 1px solid red;width: 500px;height: 200px;margin: 10px auto;background-color: bisque;">456</div>
<div style="border: 1px solid red;width: 500px;height: 200px;margin: 10px auto;background-color: chocolate;">
<span style="font-size: 30px;color: aqua;font-weight: bold;">金球奖</span>的评选以赛季而非自然年为单位，今年的时间范围是从2022年8
月1日到2023年7月31日，包括去年的世界杯。
</div>
<span style="border: 1px solid greenyellow;width: 500px;height: 100px;">555</span>
</body>
- 效果
特殊字符
对于有特殊含义的字符,需要通过转义字符来表示
w3school 在线教程
- 代码
<body>
<!--
有特殊含义的符号：字符实体
对于htm1代码来说，某些符号是有特殊含义的，如果想显示这些特殊符号，需要进行转义
< <
> >
& &
-->
<h1>一级标题</h1>
<hr>
&gt;
</body>
- 效果
191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
