一、HTML基础知识
（一）HTML超文本标记语言
超文本：链接（与浏览器有关）
标记：标签<标签名>
标签
标签一般（单标签： <br>换行、<hr>水平线）成对出现,中间包裹内容
例：加粗标签，是打开
双标签：包裹内容
（二）HTML基本骨架：(VS Code 快速生成：!+enter/!+Tab)
<html>
<!--象征这是html语言写的HTML文件-->
<head> <!--注明相关网页信息,用户不能在页面看见--> <title></title><!--网页标题，可在网页标签栏看见--> </head>
<body>
<!--网页内容，用户能看见-->
</body>
</html>
（三）标签关系:（Tab->向后缩进一格，shift+Tab->向前一格）
父子（嵌套）：html和head
兄弟（并列）：head和body
（四）注释（VS Code中添加/删除注释的快捷键：ctrl+/）
对代码进行解释说明，方便理解、查找、修改、合作。
<!--这是HTML中的注释标记-->
（五）标题标签
标题名：h1-h6(双标签)
独占一行、h1-h6字体由大变小
h1标签在网页中一般只用一次（其他没有限制）
（六）段落标签
p（双标签）
独占一行，段落之间存在空隙
（七）换行与水平线标签（单标签）
换行：<br>
水平线：<hr>
（八）文本格式化标签（为突出重点）
常见文本格式：加粗、倾斜、下划线、删除线等
加粗：strong（b）
倾斜：em（i）
下划线:ins（u）
删除线：del（s）
（九）图像
（1）图像标签（快捷键：./）
<img src="">
src：用于指定图片的位置和名字
（2）图片标签的属性
alt：替换文本（当图片无法显示时用该文本代替）
title：提交文本（当鼠标悬浮在图片上面的时候显示的文字）
width：图片宽度；height：图片高度（一般在css文件中设置，改变一个，浏览器会等比改变另一个）
<img src="" alt="" title="">(属性之间用空格隔开，且没有先后顺序)
（3）路径（所在位置）
相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件
相对：
. :当前文件夹
/ ：进入文件夹
./:进入当前文件夹
../:进入当前文件夹的上一级文件夹
例：进入html文件的上级-新建文件夹
绝对：
（1）Windows 电脑从盘符出发
（2）Mac电脑从根目录（/）出发
Windows 默认是\,其它系统是/，建议统一写为/
（3）文件的在线网址：http://www.itheima/images/logo.png
（4）友情链接
注：在实际过程中我们查找自己本地文件一般使用相对路径
（十）超链接（点击跳转）
<a href=""></a>
href:跳转地址（可是绝对也可是相对）
target属性：指明跳转位置 例：_blank在新窗口打开页面
<a href="#"></a>为空链接
（十一）音频标签：
audio
属性：
注：在属性名与属性值相同是可简写为一个单词
例：controls="controls"=>controls
（十二）视频标签：
video
属性
网页制作：
从上到下，从整体到局部，
先想内容，写代码实现内容，预览
（十三）列表，表格，表单
（1）列表：无序、有序、定义（一个类表有多个分类的排列整齐的区域）
无序:ul嵌套li，ul无序列表，li无序列表条目
注：ul标签里面只能包裹li标签
有序：ol嵌套li
定义：dl嵌套dt、dd，dl是定义列表，dt是定义标题，dd是具体描述
(2)表格
1.标签
table嵌套tr，tr嵌套td、th
table是表格，tr是行，th是表头单元格，td是内容单元格
注：在网页当中默认没有边框线，使用border属性可谓表格添加边框线
/*了解*/表格结构标签：（使得浏览器能更清楚表格的结构）
thead：表格头部
tbody：表格内容
tfoot：表格汇总
2.合并单元格
跨行合并：保留需合并的最上单元格，添加rowspan属性，属性值为数字：合并几格子就是几
跨列合并：保留需合并的最左单元格，添加colspan属性
注：不能跨结构标签合并
(3)表单（收集用户信息）
1.input标签的基本使用（type属性值不同，功能不同）
text特点：输入什么就显示什么且为单行
password特点：输入什么都是以点的形式显示，起一定的保密作用
input标签的占位文本（placeholder）----->提示信息
<input type="" placeholder="">
单选框radio-常配合使用的属性：
多文件上传：multiple属性
<input type="file" multiple>
多选框：默认选中（checked）
2.下拉菜单
select嵌套option，select为下拉菜单整体，option为选项
默认显示：selected
<select>
<option>beijing</option>
<option selected>shanghai</option>
<option>dali</option>
</select>
3.文本域
textarea
特点：在右下角有拖拽功能，未来都会禁用
在css中设置尺寸：cols（列），rows（行）
4.label标签（网页中某个标签的说明文本）：可用于所有表单控件
注：用label标签绑定文字和表单控件的关系，有增大表单控件的点击范围的作用
例：法一：
<input type="radio" name="gender" id="man"><label for="man">男</label>
法二：使用label标签直接包裹文字和控件
<label><input type="radio" name="gender">女</label>
5.按钮
<button type=""></button>
6.表单区域标签
form（button标签通常包含在form标签里面）
（十五）无定义的布局标签（用于网页布局）
div：独占一行
span：不换行
当在页面中有多个大块面积且相互之间换行的内容时：内容和内容之间可用<div>区别开来
让页面中遇到并排的不同区域时，可用span分别包裹各个区域
（十六）字符实体
空格： ；
小于号（<）:<（l->L的小写）
大于号（>）:>
二、css基础知识
（一）css定义：
层叠样式表，一种样式表语言，用于美化html文档显示
书写位置：
1.内部样式表：写在html文件中（css语言在style标签中）:
<head>
<title></title>
<style>
/*css语言:选择器{属性名:属性值} 例：p{color:red;}，属性名和属性值成对出现被称为键值对*/
</style>
</head>
2.引入方式：
（1）开发使用：外部样式表（常用，css代码写在.css后缀的文件中），在HTML使用link标签引入
<link rel="stylesheet" href="">(写在<title></title>后)
rel属性用于设置对象与链接目的间的关系（要链接什么东西）
stylessheet---定义一个外部加载的样式表。
（二）选择器
（当一个标签以不同形式设置了多种样式，其中重叠的样式使用最特别的那个设置的样式）
1.标签选择器（直接用标签名作为选择器）
例：p，div，body等
特点：选择同名标签会将其设置为共同样式，没有差异性
2.类选择器：差异化设置标签的显示效果
在每个需要样式的标签中添加class属性合属性值（类名）
需要相同样式的标签将class属性设置为相同的类名
不同的设置不同类名，实现差异化
在css文件中用
.类名{}设置样式
（注：1.class的属性值可以有多个，属性值之间用空格隔开;2.取类名得见名知意（尽量用英文），多个单词可连接使用（news-hd））
3.id选择器（差异化样式）
一般配合JavaScript使用
添加id属性和属性值（id名）
特点：同一个id选择器在一个页面只能使用一次。
在css文件中的使用：#id名 {}
4.通配符选择器（*{}）
设置页面中所有标签的样式
(三)文字修饰属性（font和她的属性值）
1.属性名font-size：（谷歌浏览器文字有默认大小：16px）
属性值：文字尺寸，pc端常以px为单位（用数字设置大小时若没有单位，属性将不生效）
2.属性名：font-weight
属性值：
（1）数字（开发使用）
正常：400 加粗：700
（2）关键字（了解）
正常：normal
加粗：bold
font-weight:700;
3.字体样式：属性名font-style
属性值：正常normal 倾斜italic
4.行高：line-height
从一行文字的最顶测量到下一行文字的最顶
属性值：
（1）数字+px
（2）数字（当前标签font-size属性值的倍数）
单行文字可利用行高实现垂直居中：
使行高属性值等于高度属性值。（利用行高等于上间距+文本高度+下间距的原理）
5.字体族：font-family 属性值：字体名
注：1.font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左到右依次查找。
2.font-family属性最后设置一个字体族民，网页开发建议使用无衬线字体（
sans-serif）
6.font复合属性：
是否倾斜，是否加粗，字号/行高，字体（必须按顺序写且字号和字体必须写，否则font不生效）
style、weight、size/line-height、family
7.文本缩进:属性名text-indent
属性值：
数字+px
数字+em(1em=当前标签的字号大小，常用)
8.文本对齐：属性名text-align（水平对齐）
属性值
text-align:center;(最常见)
居中的文字内容，不是标签，以此为依据可用text-align实现图片居中的效果
需将图片标签放入div标签中形成嵌套结构
html文件： css文件
<div class="center"> .center {
<img src=""> text-align:center;
</div> }
9.文本修饰线：属性名：text-decoration
属性值：
10.颜色：属性名color
属性值：
（四）调试工具：（谷歌浏览器）
在浏览器中预览写好的代码效果，右击鼠标，出现以下界面，点击检查，可对代码进行调试。
检查
1、如果是错误的属性，有黄色叹号
2、css属性的前面有多选框，如果勾选，这个属性生效，如果没有勾选，这个属性不生效。
扫一扫
729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
