web前端-html
HTML部分
HTML：超文本标记语言。是万维网web编程的基础，web是建立在超文本基础上的。HTML 是万维网的基石
打开www.baidu.com的页面源代码可见
超文本标记超的含义
1.最重要的标签，超链接标签，可跳转页面，关联所有页面
2.超越文本的意思，不一定是文本， 可以是各种各样的东西（图片，音频等），带宽不行，没有生存土壤
HTML的发展历程
1990年出现，web之父Tim Berners-lee发布了《HTML标签》的论文，借用SGML的标记语法，主要的目的是解决互联网的传输问题。94年中国搭建了第一条国际光缆，95.96年中国大部分发展中国家和发达国家基本连通
因为最后免费开源，所以对互联网的发展做出了不可估量的作用。
全球第一个网站
蒂姆·伯纳斯-李 创建的:http://info.cern.ch
环境搭建
开发环境：能写代码就行，vscode，Pycharm,webstorm,hbuilder等等
运行环境：谷歌浏览器（chrome），建议英文搜索，别下载盗版了，或者用链接：Google Chrome 网络浏览器
第一个页面
页面的hello world
创建页面的时候后缀必须.html
文件名称必须是英文，避免中文乱码
手动创建
编写HTML的细节
-
1.所有标签都是成对出现（开始，结束标签）
-
指定版本，DOCTYPE文档声明，告诉浏览器使用哪个标准来渲染页面
-
HTML不区分大小写
-
html标签是html页面的跟标签，head和body标签
-
head部分不可见，但是定义页面的各种属性，body
基础的第一个页面
`<!DOCTYPE html>` `<html>` `<head>` • `<title>这是CSDN</title>` <meta charset="utf-8"/> `</head>` `<body>你好，CSDN` <p>Hello CSDN</p> `</body>` `</ht`ml>
<!--heml的注释是这样写的--！>
使用静态web服务器，必须是以文件夹的形式弄，不能以单独页面存在，不然报错！
使用工具快速生成页面模板方法：在新建的.html文件中输入：！＋Tab或者html.5
常见网页标签
常见有100多个网页标签,常用20来个，名称简单，学习方便。
-
p 段落标签，一段是一个内容，段落中有间隙
-
hn 标题标签<hn1>,<hn2>......最多到<h6>,7不生效，默认正文，
-
br 换行标签 直接写就行，只换行
-
文本修饰标签，不产生位置问题，只对文字本身进行样式，格式的修饰（加粗，加斜，加下划线，中划线.....)
-
<b>,<strong> 加粗内容
-
<em>,<i> 加斜
-
<u> 下划线
-
<del> 中划线
-
分割线标签 -
sub，sup 上下标
-
div 标准块标签
-
span 标准行内标签
标签的分类
-
行内标签（inline）
没有宽高，没有大小，不改变原有，不会占据一行，包裹的内容多大，就占据多大。
-
块标签（block）
有宽和高，意味着存在大小，块标签自己会占据一行，例如标题标签，默认占用当前行，即便调整了宽高，也不会允许其他标签占用
媒体标签
多媒体标签，除文字以外的其他表现形式，存在如下三种
-
图片标签，用来展示图片的标签<img>标签就是图片标签。必须存在某张照片，才能展示图片。
属性：属性就是标签上的属性，一般以键值对的形式在标签的开始部分存在
img的属性：
-
src
-
alt
img`<img src "图片的地址" alt="图片没有成功加载的情况，文字说明"> -
视频标签
<video contrdls="controls"
视频和音频标签，早期存在很多兼容性问题，H5标准规定了视频和音频标签：
-
video
-
audio
图片标签
<!-- 本地的绝对路径 --> <img style="height: 200px;" src="D:\picture\dog.jpg" alt=""> <!-- 本地的绝对路径 --> <img style="height: 200px;" src="./img/dog.jpg" alt=""> <img style="height: 200px;" src="img/dog.jpg" alt="这个是个可爱的小狗狗" title="这个是小狗狗的图片"> <!-- 分割线标签 --> <hr> <h2>视频标签</h2> <video style="width: 700px;" controls autoplay muted src="E:\videos\python\9.11西工商\48_第八章_IO流入门和字符输入流.mp4"></video> <hr> <audio controls src="E:\videos\python\9.11西工商\48_第八章_IO流入门和字符输入流.mp4"></audio> </body> </html>
音频标签
超链接标签
超链接标签非常重要，主要是用来实现页面跳转。
有锚点功能
表格标签
用户信息
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>用户姓名</td>
<td>用户性别</td>
<td>用户年龄</td>
<td>用户电话</td>
<td>操作</td>
</tr>
<tr>
<td>zhangsan</td>
<td>男</td>
<td>40</td>
<td>110</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>zhangsan</td>
<td>男</td>
<td>40</td>
<td>110</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>zhangsan</td>
<td>男</td>
<td>40</td>
<td>110</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>zhangsan</td>
<td>男</td>
<td>40</td>
<td>110</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>zhangsan</td>
<td>男</td>
<td>40</td>
<td>110</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>zhangsan</td>
<td>男</td>
<td>40</td>
<td>110</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
</table>
<h1>单元格合并</h1>
<table border="1" cellpadding="0" cellspacing="0" width="800">
<tr>
<td>用户姓名</td>
<td>用户性别</td>
<td>用户年龄</td>
<td>用户电话</td>
<td>操作</td>
</tr>
<tr>
<td>zhangsan</td>
<td>男</td>
<td rowspan="3">40</td>
<td>110</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>zhangsan</td>
<td>男</td>
<td>110</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>zhangsan</td>
<td>男</td>
<td>110</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>zhangsan</td>
<td>男</td>
<td>40</td>
<td>110</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>zhangsan</td>
<td>男</td>
<td>40</td>
<td>110</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>zhangsan</td>
<td>男</td>
<td>40</td>
<td>110</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td colspan="5">总结：xxx人</td>
</tr>
</table>
</body>
</html>