初始HTML

内核来进行解析渲染.内核不一样,相同的代码会不同网页:
Web标准:+

1.结构:HTML;2.表现:CSS;3.行为:JavaScript;

HTML超文本标记语言

<strong>
你猜这个字是加粗的吗
</strong>

骨架有:
html标签:网页的整体;
body标签:网页的身体;
head标签:网页的头部;
title标签:网页的标题;

html的注释:

快捷键:在vs code中CTRL+/

标题标签:

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
想要出现在body中,文字加粗,文字独占一行;
CTRL+d:可以将相同的一起改;

段落文字:

<p> </p>
特点:独占一行,后面的空白,不让其他人占;
段落默认空一行;

换行/分割线:

换行:<br>,分割线:<hr>;

文本格式化:

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

突出重要的强调语境;

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

图片:

<img src="" alt=""(标签的属性) title="" width="" height="">

./当前的意思,可有可无;
必须写上其它的扩展名,属性间用空格隔开,标签名与属性间也以空格隔开,属性间没有顺序之分,标签上有多个属性.
src:写图片名;
alt:替换文本,当图加载失败的时候会显示替换文本.
title:提示文本,当鼠标悬停的时候,会显示的文本.(title可以用于其他的标签)
width/height:数字,如果只设置其中的一个,另一个会自动等比例放缩.

路径:

1.绝对路径:指目录下的绝对位置,可直接达到目标位置,通常从盘符开始.
如果我发给其他人,他没有在我所选的路径下,则图作废.
2.相对路径:从当前文件开始,找目标文件的过程.
相对路径分类:同级,上级,下级.
同级:
1.
2.
下级:
加上同级的文件夹,然后写上它的图片.

​ 上级:
​ 往上反一级,一级…/
​ (反了两级)

音频:

<audio src="" controls></audio>

属性名	功能
src	音频的播放路径
controls	显示播放的软件
autoplay	自动播放(部分浏览器不支持)
loop	循环播放

音频目前支持三种格式:MP3,Wav,Ogg.

视频标签:

<video src=""></video>

属性名	功能
src	音频的播放路径
controls	显示播放的软件
autoplay	自动播放(谷歌浏览器中需配合muted实现静音播放)
loop	循环播放

视频目前支持三种格式:MP4,WebM,Ogg.

链接:

<a href="./目标的网页.html"></a>
<a href="#">空连接,不知道跳到哪里</a>

target 属性

取值	效果
_self	默认值,在当前的窗口跳转(覆盖原网页)
_blank	在新的网页跳转(保留原网页)

列表标签

1.无序列表:

标签名	说明
ul	表示无序列表的整体,用于包裹li标签
li	表示无序列表的每一项,用于包含每一行的内容

ul标签只允许包含li标签
li标签中只允许放内容

2.有序列表

标签名	说明
0l	表示无序列表的整体,用于包裹li标签
li	表示无序列表的每一项,用于包含每一行的内容

3.自定义列表

标签名	说明
dl	表示自定义列表的整体,用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

dd会默认显示缩进效果

表格

标签名	说明
table	表格整体,可用于包裹多个tr
tr	表格每行,可以用于包裹td
td	表格单元格,可用于包裹内容

属性	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

表格标题和表头单元格标签

标签名	名称	说明
coption	表格大标题	表格整体大标题,默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题,通常用于表格的一行,默认内部文字加粗并且居中显示

表单:

|标签名|type属性值|说明| |---:|---:|--:| |input|test|文本框,用于输入单行文本| |input|password|密码框,用于输入密码| |input|radio|单选框,用于多选一| |input|checkbox|多选框,用于多选多| |input|file|文件选择,用于之后上传文件| |input|sumbit|提交按钮,用于提交| |input|reset|重置按钮,用于重置| |input|button|普通按钮,默认无功能,之后配合js添加功能|

text,password:

type属性值	说明
placeholder	占位符,用于提示用户输入

type:radio;

属性值	说明
name	分组,有相同name的属性值的单选框为一组,能有一个
check	默认选中

上传多个文件

属性值	说明
multiple	多文件选择

重置与提交要放到表单域,副级标签:

代码提示:value(重置与提交);

可以作为标签,而非属性,

属性值	说明
submit	提交按钮,点击之后提交数据给后端服务器
reset	重置按钮,点击之后恢复表单的默认值
button	普通按钮,默认无功能,之后配合js添加功能

input的type属性还可以是button，这时它只是一个按钮，不会引发表单提交。 button的语义很明确，就是一个按钮不含数据，作用就是用户交互。 但它也有type和value属性。

select:

下拉菜单:
select标签:下拉菜单的整体;
option:下拉菜单的每一项:
属性:
selected:下拉菜单的默认选中;
第一个是默认;

taxtarea:

文本域标签:可以输入多行文本,常用于网页评论区域:
cols:规定了文本域内可见的宽度;
rows:规定了文本域内可见行数:

label:

第一种方法:

1. 使用label标签把内容(如文本)包裹起来
2. 在表单标签上添加id属性
3. 在label标签的for属性中设置对应的i的属性值;
   第二种方法:
   1.表单标签与label标签把内容包裹在一起;
   2.需要把label标签的for属性删除即可;

语义化标签:

没有任何语义布局标签:div,span;
div标签:一行只显示一个(独占一行)
span:一行可以显示多个;

字符实体:

网页不认识多个空格,只认准一个