本文介绍了Web开发的基础知识，包括HTML的骨架结构、标签类型、文本格式化、媒体处理、链接、列表、表格和表单元素。还涵盖了常见的Web浏览器和Web标准的概念，以及语义化标签在网页布局中的应用。
word转md格式上传，备份使用
常见五大浏览器：
IE，火狐，谷歌，Safari（苹果），opera
web 标准：
html（结构），css（表现），js（行为）
HTML 骨架结构：
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的内容
</body>
</html>
vscode 调出骨架 写入英文状态下的!后回车
html 的语法：
1.注释**（给自己和配合工作的程序员）**
在 vscode 中 ctrl+/ （不能用数字键盘的/，再按一次可以取消）
2.标签：
双标签格式：<开始标签>内容</结束标签>（有包裹的内容即双标签）
例：<strong> 加粗</strong>
单标签：<标签内容>（不需要包裹内容即单标签）
例：<br> 换行
标签的关系：
父子（嵌套）关系：
例：
<head>
<title>网页的标题</title>
</head>
兄弟（并列）关系：
例：
<head></head>与<body></body>
3.排版标签：
标题标签：
在新闻或文章的页面中突出显示文章主题
代码：h 系列双标签 共 h1-h6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3> 以此类推
特点：
独占一行，有加粗变大，由 h1-h6 程度依次递减
ctrl+D 快速扩选相同的元素
段落标签：
在新闻或文章的页面中用于分段显示
代码：<p>一段文字</p>
特点：段落之间存在间隙，段落独占一行
换行标签：
让文字强制换行
代码：<br>
水平分割线标签：
分割不同主题内容的水平线
代码：<hr>
4.文本格式化标签：
应用场景：文字加粗，下划线，倾斜，删除线等等效果
代码：（前后意义相同，后方更容易理解，四种标签都不独占行）
加粗：<b></b>或者<strong></strong>
下划线：<u></u>或者<ins></ins>
倾斜：<i></i>或者<em></em>
删除线：<s></s>或者<del></del>
5.媒体标签
图片标签：
在网页中显示图片
代码：<img src="" alt="">
src 和 alt 是属性名，属性之间用空格隔开，属性没有先后顺序，src 指的是图片来源，alt 指的是替换文本（若图片加载失败才显示 alt 文本）
更多属性：title 属性（鼠标悬停在图片上显示文本，其他标签也可以使用）；
width 和 height 属性（宽与高设置，如果只设置了其中一个则自动等比例缩放保证图片不会变形）
路径标签：
页面需要加载内容，必须找到相应的内容
绝对路径：网址，盘符开始的地址
相对路径：从当前文件开始出发找目标文件
同级目录：当前文件与目标文件在同文件夹中，直接输入文件名.后缀或者./文件名.后缀
下级目录（当前文件所在文件夹的下一级文件夹）： 文件夹名/文件名.后缀
上级目录（目标文件所在文件夹的上一级文件夹）：…/文件名.后缀（多级则…/…/）
可组合使用：…/文件夹名/文件名.后缀
音频标签：
在页面插入音频（目前只支持 mp3（兼容性最强），wav，ogg）
代码：<audio src=""></audio>
常见属性：controls：显示音频控件
autoplay：自动播放（部分浏览器不支持）
loop：循环播放
视频标签：
在页面中插入视频（目前支持 mp4（兼容性最强），webm，ogg）
代码：<video src=""></video>
常见属性与音频相同
autoplay 在谷歌浏览器中需要配合 muted 静音播放
6.链接标签
连接到不同网页
代码：<a href="">显示的文字</a>
属性：href：跳转地址（网址需要加上 https:// 开发网站初期 href 值写成#（空连接））
target：打开形式，有_self（覆盖原网页）和_blank（保留原网页）
7.列表标签
网页中按照行的方式整齐显示内容
分类：无序列表，有序列表，自定义列表
（css 中使用 list-style:none 去除·，序号等效果）
无序列表
与顺序无关的列表，例如新闻表，表前默认使用圆点
代码：<ul> <li></li></ul>
ul 中只能嵌套 li，是无序列表的整体，li 内可以包含任意内容，一个 li 代表一个元素
有序列表
有着排行顺序的列表，例如成绩排行，表前默认按顺序编号为 1.，2.，3.
代码：<ol><li></li></ol>
ol 中只能嵌套 li，是有序列表的整体，li 内可以包含任意内容，一个 li 代表一个元素
自定义列表
网页底部导航等等
代码：<dl><dt>主题</dt><dd>内容 1</dd><dd>内容 2</dd></dl>
dl 中只能嵌套 dd 与 dt，是自定义列表的整体，dt 和 dd 内可以包含任意内容，一个 dd 代表一个元素
dd 前方默认显示缩进效果
8.表格标签
在网页中以单元格的方式整齐展示数据，标签关系 table＞tr＞td
代码：
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
table 表示表格的整体，可以添加属性，添加在 table 内部后面，tr 表示行，td 表示每行的单元格，可以嵌套所有标签
表格的相关属性：
border：边框宽度（只有写了这个才会出现边框）
width：表格宽度；height：表格高度
表格的标题和表头单元格标签：
caption：表格标题，写在 table 标签下
th：替代 td 使用，一般用于表格第一行，强调表头
表格的结构标签（用来区分使用，本质有没有无所谓）：
thead：表格头部
tbody：表格主体
tfoot：表格底部
合并单元格：
将水平（跨列合并）或者垂直（跨行合并）单元格合成一个，代码加在保留的单元格
代码：
上下合并：rowspan，合并几格写多少，只保留最上的，要删除其他的
左右合并：colspan，合并几格写多少，只保留最左的，要删除其他的
只能在同一个结构标签内合并，不可以跨结构标签合并
9.表单标签
登录，注册，搜索等等需要输入或者选择的功能使用
input 系列标签：
收集用户信息的表单效果
代码：<input type="">
type 属性值：text（文本框）
password（密码框，书写的内容都是圆点）
radio（单选框）
checkbox（多选框）
file（文件选择，用于上传文件）
submit（提交按钮）
reset（重置按钮)
button（普通按钮，没有特殊功能，配合 js 使用）
text，password 中：placeholder 属性，可以提示用户输入数据（就是文本框内的灰字）
radio 单选框：name 属性，规定 radio 点的组别，同一组别只能选择一个
checked 属性，默认选中，也可以使用在 checkbox 中
file 中：multiple 属性，多文件上传
按钮系列中：使用时需要一个父级标签 form 将需要作用到的部分框起来（action 是后台地址）
使用 value 属性插入按钮上的字，submit 自带提交，reset 自带重置
button 标签：
代码：<button></button>
type 属性值（同 input 按钮系列）：
submit（提交）
reset（重置）
button（普通按钮）
select 标签：
下拉菜单
代码：
<select>
<option>选项名 1</option>
<option>选项名 2</option>
</select>
属性：selected，默认选中，未标明则是第一个默认选中
textarea 文本域标签：
提供可以输入多行文本的表单控件
代码：<textarea></textarea>
属性：
cols：规定文本域可见宽度（一般用 css）
rows：规定文本域可见长度（一般用 css）
label 标签：
绑定内容和表单标签的关系（实现点文字就可以勾选）
代码：<label for="id 序号">内容</label>
需要在表单标签中添加 id，与 label 中的 id 内容相同
方法 2：使用 label 包裹表单标签
<label><input type=""></label>
10.语义化标签
1.没有语义的布局标签
代码:<div></div>（独占一行）
<span></span>（不独占一行）
2.有语义的布局标签（手机端网页用到）
标签：header（网页头部）
nav（网页导航）
footer（网页底部）
aside（网页侧边栏）
section（网页区块）
article（网页文章）
以上全部都为独占一行，无其他特殊效果
11.字符实体
如果需要实现多个空格，换行，缩进等等效果
结构： （空格）
扫一扫
2293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
