HTML&CSS学习笔记

jpx__

已于 2023-06-24 00:42:00 修改

阅读量53

点赞数

文章标签： html css 学习

于 2023-06-24 00:37:16 首次发布

本文链接：https://blog.csdn.net/jpx__/article/details/131356102

版权

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标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

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

jpx__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML&CSS学习笔记

元素定义了整个 HTML 文档。这个元素拥有一个开始标签，以及一个结束标签元素定义了 HTML 文档的主体。这个元素拥有一个开始标签以及一个结束标签
复制链接

扫一扫

HTML&CSS学习笔记

HTML&CSS学习笔记

HTML

1.常用标签

1.1基础标签

1.1.1 <html>

1.1.2 <body>

1.2标题和段落标签

1.2.1标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

1.2.2段落

1.3换行和水平线标签

1.3.1换行

1.3.2水平线

1.4文本格式化标签

1.5图片标签

1.6音频标签

1.7视频标签

1.8链接标签

1.9列表

1.9.1无序列表

1.9.2有序列表

1.9.3自定义列表

1.10表格

常见属性

1.11表单标签

1.11.1 input标签

属性值

1.11.2 button标签

1.11.3 select标签

1.11.4 textarea文本域标签

1.11.5 label标签

CSS

1基础选择器

1.1标签选择器

1.2类选择器

1.3id选择器

1.4通配符选择器

2字体和文本样式

2.1字体大小

2.2字体粗细

2.3字体样式

2.4字体系列

“相关推荐”对你有帮助么？