html入门

笨比2号

已于 2023-08-19 09:43:59 修改

阅读量115

点赞数 1

文章标签： html 前端

于 2023-08-04 22:30:35 首次发布

本文链接：https://blog.csdn.net/m0_62289159/article/details/132113337

版权

html入门

一、前置知识点

网页由文字、图片、音频、视频、超链接组成。

代码通过浏览器转换成网页。

五大浏览器：IE浏览器、火狐浏览器、谷歌浏览器、Safari浏览器、欧朋浏览器。推荐浏览器：谷歌

因为不同浏览器渲染引擎不同，解析的效果会存在差异。所以相同的网页在不同浏览器中显示效果不会完全一致。

Web标准的构成有：结构：HTML;表现：CSS;行为：JavaScript

推荐编译器：vscode

网页固定结构

<html>
    <head>
        <title>网页的标题</title>
    </head>
    <bode>
      网页的主题内容
    </bode>
</html>

二、标签

1.标签结构

双标签 <_>…</> 需要确定开始和结束的位置

单标签<~> 不需要确定开始和结束的位置

2.标签关系

嵌套关系、并列关系

3.排版标签

(1)标题标签

<h1></h1>(最重要) ~ <h6></h6>

(2)段落标签

<p></p>用于分段显示。是一段，会根据浏览器大小自动调节每行的字体，自动换行。

(4)换行标签

<br>强制性换行。

(5)水平线标签

<hr>分割不同主题内容的水平线。

4.文本格式化标签

(1)加粗

<b></b> <strong></strong>(语义强一点，突出重要性，以下类同)

(2)下划线

<u></u> <ins></ins>

(3)倾斜

<i></i> <em></em>

(4)删除线

<s></s> <del></del>

5.媒体标签

(1)图片标签

<img src="" alt="" title="" width="" height="">

src 这样的称为属性名，"“属性名，src=”"是标签属性

src放路径。

alt为替换文本，当图片不显示的时候显示的文字。

title为提示文本，鼠标悬停的时候显示。

width和height为宽度和高度，只设置一个，另外一个会等比例缩放。

src是必须要有的

(2)绝对路径

从盘符开始的路径:E:~~

完整的网址:~

(3)相对路径（工作中一般用的）

同级路径：

<img src="1.png">
<img src="./1.png">

下级路径：

<img src="images/1.png">

上级路径:

<img src="../1.png"> 返回上一级

(4).音频标签

<audio src="./music.mp3" controls></audio>
src 音频的路径
controls 显示播放的控件
autoplay 自动播放（部分浏览器不支持）
loop 循环播放

(5).视频标签

<video src="./music.mp3" controls></video>
src 视频的路径
controls 显示播放的控件
autoplay 自动播放（谷歌浏览器中需配合muted实现静音播放）
loop 循环播放

(6).链接标签

<a href="./目标网页.html">超链接</a>
不知道跳转地址用#替代，意为空链接。

target:目标网页的打开形式
取值:_self 默认值，在当前窗口跳转；_blacnk:在新窗口跳转

锚点连接:在链接文本的href属性，设置属性值为#名字的形式，如<a href="#two">02</a>
然后找到目标位置标签，在里面添加id属性=刚才的名字，如<h3 id="two">02</h3>

6.列表、表格、表单标签

(1)列表标签

无序列表

ul:表示无序列表的整体，来包裹li标签   unordered
li:表示无序列表的每一项，用于包含每一行的内容

ul标签只允许包含li标签
li标签可以包含任意内容

li内容前面显示的是小黑点

有序列表

ol:表示有序列表的整体，来包裹li标签  ordered
li:表示有序列表的每一项，用于包含每一行的内容

ol标签只允许包含li标签
li标签可以包含任意内容

li内容前显示的是序号

自定义列表

dl:表示自定义列表的整体，来包裹dt/dd标签  defined
dt:表示自定义列表的主题
dd:表示自定义列表的针对主题的每一项内容

dl标签只允许包含dt/dd标签
dd/dt标签可以包含任意内容

dd内容前默认显示缩进效果

(2)表格标签

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

table属性：
border：边框宽度
width：表格宽度（一般不在这里设置）
height：表格高度

其他属性：
caption：表格大标题，默认在表格整体顶部居中位置显示，写在table标签内部
th：表头单元格，表示一列小标题，通常于第一行，默认内部文字加粗并居中显示，替换td

表格结构：
thead：表格头部
tbody：表格主体
tfoot：表格底部
包裹tr，可省略

合并单元格：
跨行合并：垂直合并，只保留最上的 rowspan
跨列合并：水平合并，只保留最左的 colspan
合并几个写几
只有同一个结构标签的才能合并，比如tbody只能和tbody合并
<td rowspan="2">xxx</td>
--然后把对应的那一行直接删了--

(3)表单标签

input系列

type属性值：
text:文本框，用于输入单行文本
password:密码框，用于输入密码
radio:单选框，用于多选一
checkbox:多选框，用于多选多
file:文件选择，用于之后上传文件
submit:提交按钮，用于提交
reset:重置按钮，用于重置
button:普通按钮，默认无功能，之后配合js添加功能

text属性值的常用属性(password同)

placeholder:占位符，提示用户输入内容的文本

单选框

name:分组，有相同name属性为一组
checked:默认选中

文件选择

multiple:多文件选择

按钮

submit:提交按钮，点击之后提交数据给后端服务器
reset:重置按钮，点击之后恢复表单默认值
button:普通按钮，默认无功能，之后配合js使用
都可以用value加提示文字

如果需要实现以上功能，要配合form标签
用form标签把表单标签包裹即可

button系列

type属性值：
submit
reset
button:皆同上

自己加文本，不用value

select下拉菜单

select:下拉菜单整体
option:下拉菜单的每一项

selected：默认选中

textarea文本域标签

cols:规定可见宽度
rows:规定可见行数
工作中用css改

lable标签使用

方法一：
1.使用label标签把内容包裹
2.在表单标签上添加id属性
3.在label标签的for属性中设置对应的id属性值

<input type="radio" name="sex" id="nan"><label for="nan">男</label>
这样点男也可以选中了

用法二：（简单）
1.直接用label把内容和表单表单一起包裹
2.删除label的for

<label><input type="radio" name="sex">女</label>

7.无语义标签

div和span

作用：网页布局

div标签：一行只显示一个
span标签：一行可以显示多个

8.字符实体

 空格 &nbsp

三.骨架补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

文档类型声明，告诉浏览器该网页的HTML版本

这个是html5版本

< html lang=“en”>标志网页使用的语言
作用：搜索引擎归类+浏览器翻译
常用:zh-CN简体中文/en英文

< meta charset=“UTF-8”>标识网页使用的字符编码
作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码
常见字符编码：
1.UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
2.GB2312：6000+ 汉字
3.GBK： 20000+汉字
开发中统一使用UTF-8字符编码即可

< meta name=“viewport” content=“width=device-width, initial-scale=1.0”>宽度=设备宽度，移动端网页时候要用

有的会有一句 < meta http-equiv=“X-UA-Compatible” content=“IE=edge”>是来解决ie兼容性的