HTML&CSS学习笔记
HTML
1.常用标签
1.1基础标签
1.1.1 <html>
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ,以及一个结束标签 </html>.
1.1.2 <body>
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>.
1.2标题和段落标签
1.2.1标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
1.2.2段落
<p>这是一段文字</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
1.3换行和水平线标签
1.3.1换行
<br>
1.3.2水平线
<hr>
1.4文本格式化标签
<b><strong>加粗
<u><ins>下划线
<i><em>倾斜
<s><del>删除线
b strong
u ins
i em
s del
strong,ins,em,del 语义更加强烈
1.5图片标签
显示图片 <src = " " alt = " " title = " ">
#####常见属性
src:目标图片位置
alt:当图片加载失败时显示的文本
title:当鼠标悬停时显示的文本
width和height:宽度和高度
1.6音频标签
<audio src = " " controls = " "></audio>
#####常见属性
src: 音频路径
controls: 显示播放的控件
autoplay: 自动播放
loop:循环播放
1.7视频标签
<video src = " " controls = " "></video>
#####常见属性
src: 视频路径
controls: 显示播放的控件
autoplay: 自动播放
loop:循环播放
1.8链接标签
<a href = " "><超链接/a>
href:目标网页 (# 空链接)
target:目标网页打开形式(_self:覆盖原网页,_blank 在新窗口中跳转)
跳转到bilibili
1.9列表
1.9.1无序列表
<ul> 表示无序列表整体
<li> 表示无序列表每一项
- 第一行
- 第二行
- 第三行
1.9.2有序列表
<ol> 表示有序列表整体
<oi> 表示有序列表每一项
- 第一行
- 第二行
- 第三行
1.9.3自定义列表
<dl> 表示自定义列表整体
<dt> 表示自定义列表主题
<dd> 表示自定义列表针对主题的每一项内容
1.10表格
#####常见标签
<table> 表格整体,可用于包裹多个tr
<tr> 表格每行,可用于包裹多个td
<td> 表格单元格,可用于包裹内容
<caption> 表格大标题
<th> 表头单元格
<rowspan> 跨行合并,合并单元格个数
<colspan> 跨列合并,合并单元格个数
常见属性
border: 边框宽度
width: 表格宽度
height: 表格高度
1.11表单标签
1.11.1 input标签
<input>
属性值
text 文本框,输入单行文本
password 密码框,用于输入密码
radio 单选框,用于多选一
checkbox 多选框,用于多选多
file 文件选择
submit 提交按钮
reset 重置按钮
button 普通按钮
1.11.2 button标签
<button>
#####属性值
submit 提交按钮
reset 重置按钮
button 普通按钮
1.11.3 select标签
<select> 下拉菜单整体
<option> 下拉菜单每一项
#####属性值
selected 下拉菜单的默认选中
1.11.4 textarea文本域标签
<textarea></textarea>
#####属性值
cols 规定了文本域内可见宽度
rows 规定了文本域内可见行数
1.11.5 label标签
<label></label>
用于绑定内容与表单标签的关系
CSS
1基础选择器
1.1标签选择器
结构: 标签名{css属性名:属性值;}
作用:通过标签名找到页面中所有这类标签,设置样式。
1.2类选择器
结构: 标签名{css属性名:属性值;}
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式。
1.3id选择器
结构: 标签名{css属性名:属性值;}
作用:通过id属性值,找到页面中所有带有这个id属性值的标签,设置样式。
1.4通配符选择器
结构:*{css属性名:属性值;}
作用:找到页面中所有的标签,设置样式。
2字体和文本样式
2.1字体大小
属性名:font-size
取值:数字+px
2.2字体粗细
属性名:font-weight
取值
- 关键字
- 正常:normal 加粗:bold
- 数字 100~900的整百数
- 正常:400 加粗:900
2.3字体样式
属性名:font-style
取值:
- 正常(默认值):normal
- 倾斜:italic
2.4字体系列
属性名:font-family