-
HTML初体验
建立一个文本文档——编辑内容——更改文本文档为html或htm（建议前者html)（就变成浏览器图标）
-
HTML标签
1.html标签是HTML的基本组成单位。
标签又分为双标签和单标签。
2.双标签：
格式：〈标签名〉标签体〈/标签名〉
例如：<marquee>web前端技术很好</marquee>
3.单标签：
格式：〈标签名/〉 /通常可以省略不写
例如：〈input/〉
4.标签之间的关系可以是并列也可以是嵌套
例如：<marquee>web前端技术很好＜input＞</marquee>
-
HTML标签属性
1.属性是用于给标签增添附加信息
2.可以写在双标签的起始标签或者单标签中
3.格式：〈标签名 属性名=“属性值”〉
4.属性值可以用“”，‘’，也可以不写，但是建议用“”
5.在一个标签里可以有多个属性
6.同一个标签中不要出现相同属性，否则后面的属性值会失效。
- HTML的基本结构
有基本的〈html〉〈/html〉，〈head〉〈/head〉，〈title〉〈/title〉，〈body〉〈/body〉
-
HTML骨架
<html> ————>根标签：包裹整个网页
<head> ————>网页头部
<title> 网页标题 </titke> ————>网页标题
</head>
<body> ————>网页主体部分
网页内容
</body>
1.head标签的内容不会出现网页中
2.head标签中的title
-
软件安装与使用（VScode)
1.安装
2.汉化：
在扩展中下载Chinese（简体中文）安装重启后就完成汉化
3.字体设置：
管理→设置→控制字体大小
4.主题设置：
管理→主题→颜色主题→现在深色
5.建立第一个html（快捷键）
①创建一个文件夹→创建一个.html文件
②编写HTML代码、运行
编写结构筐快捷键：！（英语输入）+enter键 或者 ！（英语输入）+tab键
删除快捷键：Ctrl+shift+k
向上或向下复制粘贴行代码：Alt+Shfit + ↓ 或 ↑
实现光标换行：Ctrl + Enter
选中单行：Ctrl + L
运行HTML网页：点击右键+open with live server
-
文档类型声明
<！DOCTYPE html> 这句代码的意思就是说当前是以HTML5版本来显示网页的
注释
<！-- -->
HTML标准的网页
<！DOCTYPE html> <！--文档类型声明-->
<html lang="zh-CN"> <！--网页语言声明，zh-CN是中文，en是英语-->
<head>
<meta charset="UTF-8"> <！--字符编码声明，UTF-8是万国码-->
<title>第一个wed网页</title>
<body> </body>
</html>
-
网页排版标签
1.标题标签（会自动换行，字体会加粗）
<h1> </h1> 一级标签
<h2> </h2> 二级标签
<h3> </h3> 三级标签
<h4> </h4> 四级标签
<h5> </h5> 五级标签
<h6> </h6> 六级标签
2.段落标签
<p> </p>
<br /> 强制换行标签
（区别段落标签，强制换行标签两段距离大）
3.盒子
<div> </div>是没有语义的,是用于整体布局,用来放内容的。
-
文体标签
倾斜:<em></em>
斜体:<i></i>
粗体标签:<b></b>
加粗标签:<strong></strong>
缩小标签:<small></small>
上标效果标签: <sup></sup>
下标效果标签: <sub></sub>
删除线标签:<del></del>和<s></s>
下划线标签:<ins></ins>和<u></u>
-
网页图标
1.（直接将图片复制到文件.html同等级文件夹下面）
2.图像标签
<img src = "图片路径" >
图像标签常见的属性
src=“图片路径”（必须要有的属性）
alt =“显示图像文本信息” （替换文本,图片不能正常显示时,显示文本）
width=“像素”（设置图片宽度）
height=“像素 ”（设置图片高度）
title=“文本”（提示文本,鼠标放在图片上,显示的文字）
-
相对路径
1.特点：
相对路径是从代码所在的这个文件出发，去寻找目标文件，所以我们说的上一级，下一级和同一级就是图片相对于代码文件的位置。
2.相对路径的分类：
./ 同一级路径（图像文件和编写代码的文件在同一级，也可以省略）
/ 进入下一级路径
../ 上一级路径
-
绝对路径
1.特点：
是指从根目录下的绝对位置，直到达目标位置，通常是从盘符开始的路径或者是完整的网页地址。
2.绝地路径的分类：
a.网络绝对路径
b.本地绝对路径（从网盘开始）
-
超链接
1.语义：
定义超链接，点击后跳转到另一个链接
2.语法格式：双标签
3.<a>内容</a＞
完整表达：
<a herf=“跳转的路径” target=“弹窗方式”>内容</a>
4.属性：
herf=“跳转的路径”
target=“_self”
（原窗口，默认值，如果不写target 属性就默认这个值）
target=“_blank”
（新窗口）
注意：代码中多个回车或空格，都会被浏览器解析为一个空格
5.超链接分类：
- 外部链接：<a herf=“http:// ”>内容</a>
- 内部路径：网站内部之间的相互连接，使用相对路径
- 空连接：如果没有确定连接目标时。
刷新页面<a href=“#”>刷新页面</a>
- 锚点连接：当我们点击连接，可以快速定位到页面的某个位置
例如：<a href=“#属性值”>内容</a>
<h3 id=“属性值”>内容</h3>
<p id=“属性值”>内容</p>
实例：
列表三大类：有序列表，无序列表，自定义列表。
- 有序列表：（Ordered List）
有序列表标签：〈ol〉 内容〈/ol〉
嵌套list（清单)标签：〈li〉 内容〈/li〉
例如：〈ol〉
〈li〉苹果〈/li〉
〈li〉香蕉〈/li〉
〈li〉石榴〈/li〉
〈/ol〉
效果：1.苹果
2.香蕉
3.石榴
- 无序列表：（unordered list）
无序列表标签：〈ul〉 内容〈/ul〉
嵌套list（清单)标签：〈li〉 内容〈/li〉
例如：〈ul〉
〈li〉苹果〈/li〉
〈li〉香蕉〈/li〉
〈li〉石榴〈/li〉
〈/ul〉
效果：·苹果
·香蕉
·石榴
- 自定义列表：（description list）
自定义列表标签：〈dl〉 内容〈/dl〉
嵌套list（清单)标签：〈li〉 内容〈/li〉
例如：〈dl〉
〈li〉苹果〈/li〉
〈li〉香蕉〈/li〉
〈li〉石榴〈/li〉
〈/dl〉
效果：-苹果
-香蕉
-石榴
表格
- 一个完整的表格：
表格标题标签：〈captain〉 〈/captain〉
表格的头部标签：〈thead〉 〈/thead〉
表格的主体标签：〈tbody〉 〈/tbody〉
表格的助脚标签：〈tfoot〉 〈/tfood〉
表格的行标签：〈tr〉 〈/tr〉
表格的列标签：<td> </td>
表格头部的单元格标签：〈th〉 〈/th〉
- table标签的属性：
border：设置表格的边框 默认为1
cellspacing：设置单元格之间的距离
width：设置表格宽度
height：设置表格高度
- tr标签的属性：
height：设置行高
align：设置单元格水平对齐方式（left（默认值)，center，right）
valign：设置单元格垂直对齐方式（top，bottom，middle（默认值)）
- th和td标签的属性：
width：宽度
height：高度
align：设置单元格水平对齐方式（left，center，right）
valign：设置单元格垂直对齐方式（top，bottom，middle）
- 合并单元格方式
A. 合并行：rowspan="合并单元格的个数"
（纵向合并）
B. 合并列：colspan="合并单元格的个数"
（横向合并）
-
常用标签补充
强制换行标签：<br/>
分割线标签：<hr/>
表单标签<form> </form>
- 表单的作用：
收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。
- 表单的基本结构
<form name="表单名称" method="提交方法get/post" action="处理程序，服务器地址">
...
</form>
注释：get：采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上
- 输入标签<input>
1.标签规定了用户可以在其中输入数据的输入字段。<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。
2.基本语法：<input type="元素类型" name="表单元素名称" value="默认值">
使用input标签输入域的type属性，画各种各样的按钮：
重置按钮<input type="reset">
文本框<input type="text">
密码框<input type="password">
复选框<input type="checkbox">
单选按钮<input type="radio">
提交按钮，具有提交表单的能力<input type="submit">
value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
文本框与密码框
用户：<input type="text" value="易烊千玺" maxlength="10"> <br/>
密码：<input type="password" maxlength="10"> <br/>
maxlength是设置输入的字符长度
value为默认值
- 单选框
checked表示默认被选中
性别：<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
- 复选框
爱好：<input type="checkbox" name="hobby" value="song">唱歌
<input type="checkbox" name="hobby" value="sports">运动
<input type="checkbox" name="hobby" value="dance">跳舞
- 文本域
其他：<textarea name="其他" cols="12" rows="5"></textarea>
Cols设置文本域内的宽度
Rows 设置文本域的行数
- 下拉列表框
籍贯：<select>
<option>贵州</option>
<option>广西</option>
<option>重庆</option>
<option>四川</option>
</select>
- 隐藏域
<input type="hidden">
确认按钮，前两个效果相同-->
<button type="submit">确认</button>
<input type="submit" value="登录">
重置按钮reset 两个效果一样-->
<input type="reset" value="点击重置">
<button type="reset">重置</button>
一、CSS定义介绍
CSS（层叠样式表）是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
CSS：层叠样式表。
CSS的作用是什么？
· 结构：HTML（决定了身体）
· 表现：CSS（决定了样式美观）
· 行为：JavaScript（决定了交互的动态效果）
二、样式定义方式
1.行内样式表
直接定义在标签的 style 属性中，仅对当前标签产生影响。
例如：<h1 style="color: blue;font-size: 50;">行内样式</h1>
2.内部样式表
定义在 style 标签中，通过选择器影响对应的标签，可以对同一个页面中的多个标签产生影响。
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
例如：<head>
<style>
h1{
color: green;
}
</style>
<head>
3.外部样式表
定义在 .css 样式文件中，通过选择器影响对应的标签。可以用 link 标签引入某些页面，可以对多个页面产生影响。
首先在文件夹下创建 文件名.css 文件，将之前定义的样式代码移到该文件下：
h1{
color: orange;
font-size: 30px;
}
然后在 .html 文件中用 link 链接该样式表即可：
<link rel="stylesheet" href="./文件名.css">
注意： link 是个单标签哦!!!
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
4.样式优先级
行内样式>（内部样式，外部样式）
内部样式和外部样式谁后定义谁的优先级就高
三、选择器
1.基本选择器（全局选择器）
可以与任何元素匹配，优先级最低，一般做样式初始化。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style>
*{
color: green;
}
</style>
</head>
<body>
<h1>调配选择器</h1>
<h2>比较极端，改一个全部改</h2>
<p>2023.11.02</p>
<p>王俊凯，易烊千玺，王源</p>
</body>
</html>
2.元素选择器
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
h1{
color: red;
}
h2{
color: green;
}
p{
color: orange;
}
span{
color: red;
}
</style>
</head>
<body>
<h1>元素选择器</h1>
<h2>一个一个的改</h2>
<p>2023.11.02</p>
<p>王俊凯，易烊千玺，王源</p>
<h3>学完了<span>前端</span>,继续学JAVA</h3>
</body>
</body>
</html>
扫一扫
3266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
