HTML学习笔记1

最新推荐文章于 2024-07-15 13:17:25 发布

修沟的修勾在修沟

最新推荐文章于 2024-07-15 13:17:25 发布

阅读量141

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/xcxcxc_/article/details/129016378

版权

后缀

.html
.htm

Web标准中分成三个构成：

1.结构——HTML——页面元素和内容
2.表现——css——元素的外观和位置等页面样式（如：颜色、大小等）
3.行为——JavaScript——网页模型的定义与页面交互（动态）

换行标签：

<br>

水平线标签：

<hr>

HTML骨架结构：

html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题

开发工具：

VScode（推荐）、Webstorm、Sublime、Dreamweaver、Hbuilder

生成骨架（英文的感叹号! 然后回车）：

在浏览器打开：Alt + B
注释：Ctrl + /

HTML标签与标签之间的关系：

父子关系（嵌套关系、包含关系），例如：head 里面有 title
兄弟关系（并列关系），例如：head 和 body 属于并列

连选相同数字：Ctrl + D

文本格式化标签：

b——加粗——strong（右侧表示的语义更强烈，但是效果一样）
u——下划线——ins
i——倾斜——em
s——删除线——del

图片标签：img

属性名：

src，指明图片位置；
alt，为替换文本，当图片不显示时，出现alt内容
title，为提示文本，当用户鼠标悬停时，显示的文本
width
height，这两个给出一个，另一个会等比例缩放，不会扭曲

html文件与图片在同一个文件夹下，同级并列时，用 ./ 或者直接输入图片名

路径：

绝对路径，从盘符开始，D:\xxx\yyy……，网址也是绝对路径，https://xxxxxx……
相对路径（常用），从当前文件（html 文件）开始出发，寻找目标文件

相对路径分类：

../

音频标签：audio

支持三种格式：mp3、Wav、Ogg
常见属性：

src，音频的路径
controls，显示播放的控件
autoplay，自动播放（部分浏览器不支持）
loop，循环播放

视频标签：video

支持三种格式：mp4、WebM、Ogg
属性：

src，路径
controls，显示播放的控件
autoplay，自动播放（谷歌浏览器中需配合muted实现静音播放）
loop，循环播放

链接标签：a

属性：

href，跳转地址
target，控制目标网页的打开形式，target = “_self”，覆盖原网页；target = “_blank”，保留原网页，打开一个新网页

index.html 首页

列表标签：无序ul，有序ol，自定义dl

无序：
ul，表示无序列表的整体，用于包裹 li 标签
li，表示无序列表的每一项，用于包裹每一项的内容

特点：列表的每一项前默认显示圆点标识
注意：ul 标签中只允许包含 li 标签，li 标签中可包含任意内容

有序：
ol
li
默认每一项前面有序号
自定义：
dl，整体，包裹 dt、dd
dt，主题
dd，每一项（默认缩进）

表格标签：table

table，表格整体，包裹多个 tr
tr，表格每行，包裹 td
td，包裹单元格，包裹内容

属性：

border，添加边框线，设置边框宽度，在 table 后面写
width，表格宽度
height，表格高度（这两项一般在 css 里设置）

caption，表格大标题，写在 table 内部
th，表头单元格，表格的第一行，默认加粗居中（写在 tr 标签内部，替换 td）

表格的结构标签：

thead，表格头部
tbody，表格主体
tfoot，表格底部

合并单元格：

垂直合并（跨行）：rowspan
水平合并（跨列）：colspan

合并原则：左上原则
注意：不能跨结构标签合并（不能跨thead、tbody、tfoot）

合并步骤：

明确合并哪几个单元格，几个（数字）？
左上原则，删除不要的，保留左或上的
给保留的单元格设置 rowspan 或 colspan（在 td 后面加数字几）

表单标签 input：

登陆页面、注册页面、搜索页面（需要用户输入的页面）
input
type属性值：

text，文本框
password，密码框
radio，单选框
checkbox，多选框
file，上传文件选择框
submit，提交
reset，重置（要想提交和重置能用，前提是得有一个表单预标签 form）
button，一般按钮，配合 js，value = “ ”，改变提示文字
placeholder，占位符，提示应该输入什么内容
name，分组，用相同 name 属性值的单选框为一组，使得只能选中一个，实现单选意义
checked，默认选中
multiple，多文件选择

按钮 button：

type属性值：

submit
reset
button

下拉菜单：select

select，整体
option，每一项

常见属性：

selected，默认选中

textarea 文本域标签：

常见属性：

cols，可见宽度
rows，可见行数

右下角可以拖拽改变文本域大小（之后会用css来实现比较多）

label标签：

使用方法：

复杂的方法1：

使用 label 标签把内容（如：文本）包裹起来
在表单标签上添加 id 属性
在 label 标签的 for 属性中设置对应的 id 属性值

简单的方法2：

直接使用 label 标签把内容（如：文本）和表单标签一起包裹起来
只需要把 label 标签的 for 属性删除即可

语义化标签：

无语义（布局标签）：div（一行只显示一个，独占一行）、span（一行可显示多个）

有语义的布局标签：手机端网页需要做

header，网页头部
nav，导航
footer，底部
aside，侧边栏
section，区块
article，文章

常见字符实体：

空格

&nbsp;

小于

&lt;

大于

&gt;

&amp;

双引号（两撇）

&quot;

单引号（一撇）

&apot;

元（yen）

&yen;

版权

&copy;