HTML+CSS笔记整理

最新推荐文章于 2024-09-29 14:08:07 发布

2301_77576552

最新推荐文章于 2024-09-29 14:08:07 发布

阅读量973

点赞数 25

文章标签： html css 笔记

本文链接：https://blog.csdn.net/2301_77576552/article/details/142628168

版权

一、HTML基本标签

HTML中是使用标签来区分不同内容的。

标签的语法是：

双标签：<标签名></标签名>

<标签></标签>

单标签：<标签名/>

<标签/>

1.1 标题标签 h1 - h6

特点：自动加粗，依次减小。h1是最大标题 h6是最小标题

属性：就是用于描述标签的特征的。

语法：

双标签：

单标签：

水平对齐方式属性：align 【属性值是left right center】

1.2一些描述性的简单标签

换行	br
加粗	b
倾斜	i
下划线	u
删除线	s
文字	font

1.3水平线标签 hr

color	颜色
width	宽度
size	粗细、高度
align	水平对齐【默认居中对齐】

1.4段落标签 p

网页中部分字符是不识别的，需要使用转义字符。语法上以&开头，以；结尾。

	一个英文空格
&ensp;	半个字空格
&emsp;	一个字空格
>	大于号>
<	小于号<
©	版权
®	注册

段落有水平对齐方式属性align【属性值是left right center】

1.5图像标签 img

src	路径【绝对路径和相对路径】
alt	图片非正常加载时，显示提示文字
width	宽度
height	高度
border	边框
title	鼠标滑过时显示提示文字

1.6 列表标签 ul ol dl

1.6.1 无序列表 ul

无序列表是一个整体，里面包含若干个列表项

快捷键： ul > li{写文字内容} * 10

可以使用type属性修改项目符号类型

属性值有：disc默认实心圆 circle空心圆 square小方块 none无

1.6.2 有序列表 ol

有序列表是一个整体，里面包含若干个列表项

快捷键： ol > li{文字内容} * 10

可以使用type属性修改默认符号类型

属性值有：1 默认值 a A i I

可以使用start属性修改起始值

可以使用reversed属性设置倒序

1.6.3自定义列表 dl

自定义列表多用于图文混排，包含两部分内容：dt定义项 dd描述项

快捷键： dl > dt + dd

1.7 超链接 a

超链接（hyperlink）是Web页面中用于连接不同资源的一种机制。它允许用户点击文字或图片，从而跳转到另一个页面、文件、电子邮件地址或执行其他操作

链接源：文字、图片

链接目标：网页、网址、文件、邮箱、应用程序exe、锚点、空链接【#】等等等

属性： 1》href 路径

2》target 设置窗口打开方式 _self原窗口 _blank新窗口

快捷键：ul>li*10>a[#]{家用电器}*3

锚点链接：【跳转到当前页面任意位置】

第一步：设置锚点 id属性设置属性名必须符合命名规范

第二步：跳转到锚点 #锚点名

1.8 表格标签 table

表格是一个整体，里面包含行tr 列 td 或者 th

快捷键： table > tr*5 > td{内容}*4

制作细线表格有这样几步：

1》给table设置width height bgcolor=red

2》给tr设置bgcolor=white 【tr的背景色覆盖掉 table的背景色】

3》给table设置 cellspacing = 1 【调整边框的粗细】

部分属性：

table【width height bgcolor background align border cellspacing cellpadding】

tr【height bgcolor background align valign垂直对齐方式】

td【width bgcolor background align valign colspan水平合并 rowspan垂直合并】

colspan水平合并，--->

rowspan垂直合并，↓

合并的步骤：

1》设置rowspan = 数字，合几为一，就等于几

2》删除掉被合并的单元格

1.9 表单标签 form

表格：多行多列的参数，用于数据的展示

表单：用于数据的手机，实现用户与服务器的交互。

表单是一个整体，里面包含若干项

1.9.1 输入框 input

使用type属性，修改输入框的类型

1》在radio单选框中，必须使用name设置同一组，才能实现单选

2》在单选框radio和复选框CheckBox中使用checked设置初始选中

3》在文本框密码框中使用 placeholder 设置模糊提示文字

4》有三种按钮形式reset重置 submit提交 button普通

1.9.2 下拉列表 select

下拉列表select是一个整体，里面要包含选项option

1.9.3 文本域 textarea

cols 控制列数/宽度

rows 控制行数/高度

maxlength 控制最大长度/限制字数

1.10 HTML5新增语义化标签

eg:

time 【时间日期】

nav【导航】

header【头部】

footer【底部】

main【主体】

aside 【侧边栏】

二、css样式表

网页组成 = HTML + CSS + Js

HTML：超文本标记语言，控制网页的结构

CSS：层叠样式表，控制网页的外观

/* CSS语法格式：*/
选择器{
    属性: 属性值;
    属性: 属性值;
}
1> CSS的注释是 /* */
2> 选择器——用于选择的工具
3> {}不能省略
4> 属性与属性值之间以:相邻，以;结尾【注意: ;都是英文的】

2.1 CSS基本选择器

以班级为例，我能进行哪些选择呢？——1选择全班、2选择女生、3选择姓李的学生、4选择手机号是18848979993的学生、5选择正在擦电脑的学生

全局选择器 *	*{color: red;} 选择所有标签，文字颜色为红色
标签选择器标签名	p{color: red;} 选择所有p标签，文字颜色为红色
class类选择器 .类名	.name_li{color: red;} 选择所有class名为name_li的标签，文字颜色为红色
id选择器 #id名	#tel{color:red;} 选择唯一的id名为tel的标签，文字颜色为红色
伪类选择器 :状态名	:link{} 初始状态 :visited{} 点击后的状态 :hover{} 鼠标悬停/滑过状态 :active{} 鼠标点击状态 :focus{} 获取光标状态
包含选择器以空格隔开	ul li{} 选择ul里面的li ol li{} 选择ol里面的li .nav .a2{} .nav a:hover{} ul li a:hover{}
群组选择器以,隔开	h1,h2,h3{}