Html小总结

zimol

已于 2022-06-09 15:20:37 修改

阅读量1.9k

点赞数

文章标签： html 前端

于 2022-06-09 15:17:58 首次发布

本文链接：https://blog.csdn.net/zimol/article/details/125202413

版权

一.基本概念：

1.网页和网站

网站有N个网页组成

网页中包含：文字，图片，视频，音频，链接，程序等

网页的内容是由HTML技术实现

网页的后缀通常都是.html (.htm为历史遗留问题现在统一写为.html)

2.浏览器和渲染引擎

常见浏览器：Google Chorme，Firefox，Edge，Safa，Opera（不同的浏览器渲染内核不同）

3.网页的三层结构

结构层：通过HTML实现，也就是网页的内容

样式层：给网页提供样式（布局，美化等）

交互层：通过JavaScript实现，JS是前端最最最需要掌握的技术

4.开发工具

推荐使用VScode 优点：小巧灵活，拓展多

VScode常用快捷键：

shift + alt + 向下箭头 => 复制上一行
tab => 向后移动代码
shift + tab => 向前移动代码
! + tab => html基本骨架 !是英文的!
div.wraper + tab => 生成一个带名字的div
鼠标中键 + 向下拽 => 同时选中多行
键盘上的del键 => 删除文件
F2 => 重命名
shift + alt + f => 格式化代码
ctrl + f => 查找内容并替换内容

5.标签，属性，元素

标签：所有标签都是使用< >包裹起来的，分单双标签，分男标签（行内元素），女标签（块级元素），人妖标签（行内块元素）

标签与标签之间是有关系的，分兄弟关系和父子关系

属性：写在开始标签中，以xxx="xxx"这种形式出现，一个标签中可以有N个属性

属性也分两类：公有属性，私有属性

共有属性：class,id,title,style

元素：标签+属性+标签之间的内容

二.Html的基本骨架：

1.文档声明

<!DOCTYPE html> Html5的文档声明

告诉浏览器，以什么样的标准来解析我们的代码

2.html元素

是一个网页的根元素，只有一个

lang属性：指定网页的语言 zh-CN为中文 en为英文

3.head元素

网页的头部：基本上对网页的设置，都在head实现

title属性：指定网页标题

meta属性：charset="UTF-8" 如果不指定，网页会乱码

4.body属性

网页的主要内容都是写在body中的

三.常用标签：

1.h系列-标题标签 ==> h1->h6逐级递减

2.p标签-段落标签 ==>浏览器会自动适用换行

3.换行标签<br /> 强制换行，是单标签

4.文本格式化

加粗     <strong></strong>或<b></b>

倾斜     <em></em>或<i></i>

删除线  <del></del>或<s></s>

下划线  <ins></ins>或<u></u>

5.无语义标签 -> div span

6图片标签<img/>

属性：

        src: 图片的路径（来源）

        alt：当图片加载错误时显示的文字

        title:当鼠标悬停在图片上显示的文字

        width:图片的宽度

        height：图片的高度

        border:图片的边框

属性的特点：1.属性之间部分先后顺序

                      2.属性名与属性值之间以键值对的形式存在

3.属性名与属性值之间以等号分隔属性值要以引号包裹

7.路径和链接

路径：绝对路径和相对路径

        相对路径->在同一个文件夹直接找名字,向上一级 ../ 向下 /

链接标签 <a ></a>

        外部链接 <a href="http://www.qq.com"></a> 写完整的协议域名网址

        内部链接 <a href="index.html"></a> 直接写文件名即可

属性：1）href:指定跳转的页面

2）title：鼠标悬停显示的文字

3）target: _self(默认会覆盖原来的窗口) _blank(会以新的窗口打开) 窗口的打开方式

4）#：会阻止页面跳转但是会刷新页面

锚点：链接使用#   目标标签id值与连接#号后面一致

8.注释与特殊字符

编辑器使用Ctrl+/ 快捷键

四.列表类标签：

无序列表 <ul><li></li></ul>

有序列表 <ol><li></li></ol>

自定义列表<dl><dt></dt><dd></dd></dl>

五.表格类标签：

1.标签

<table></table> 表格
<tr></tr> 行
<td></td> 单元格
<th></th> 表头    加粗  加黑 自动居中
<caption></caption>  表格的标题   写在内部  显示外部  居中
<thead></thead>  结构头
<tbody></tbody>  结构体
<tfoot></tfoot> 结构底

2.属性

width：宽度
height：高度
cellspacing：单元格与单元格之间的距离
cellspadding：单元格与内容之间的距离
align：left/center/right 注意：当给表格设置居中整个表格会居中（文字不会居中）当指定tr 或者td 文字居中
border：表格的边框默认的0
colspan：列合并
rowspan：行合并

六.表单类标签：

1.input属性

1.text：文本框
2.password：密码框
3.radio：单选按钮
4.checkbox：复选框
5.button：普通按钮
6.reset：重置按钮需要配合form表单才有作用
7.submit：提交按钮
8.image 属性 src
9.file 文件按钮上传图片

2. name属性

1.发送后台......
2.name的标识对于单选按钮只能选择一个

3. value：文本框默认显示的文字
checked：默认选中
可以写一个属性也可以属性名=属性值

4.label用法

1.<label>请输入 <input type="text"> <input type="text"></label>
2.<label for="a">请输入</label>
<input type="text" id="a">

5.文本域：textarea：用户留言

6.下拉列表

<select>
        <option>请选择</option>
        <option >苹果</option>
        <option selected>香蕉</option>
        <option>橘子</option>
</select>

下拉列表的默认选中： selected

7.form表单