HTML+CSS基础

最新推荐文章于 2025-07-30 15:47:02 发布

原创最新推荐文章于 2025-07-30 15:47:02 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #html

前端知识同时被 2 个专栏收录

4 篇文章

订阅专栏

java学习第二阶段

4 篇文章

订阅专栏

HTML

1. 常见基础标签

<!DOCTYPE html>  文档类型声明，开头位置
<html lang="en"></html>  lang语言种类，en为英语 zh-CN中文
<meta charset="UTF-8">  设置编码类型
<html></html>  页面中最大的标签，根标签
<head></head>  网页头部标签，网页标题，必须要设置title标签
<title></title> 网页标题内容
<body><body> 页面内容放入body标签

举例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>

	</body>
</html>

2. 常见文本标签

<h1></h1>~~<h6></h6> 标题标签
<p></p>  段落标签
<br> 换行（单标签）
<strong></strong> 或者 <b></b>  文本加粗标签
<em></em> 或者 <i></i>  文本倾斜标签
<del></del> 或者 <s></s>  文本删除线标签
<ins></ins> 或者 <u></u>  文本下滑线标签

3. 常见的块级元素，行内块元素，行内元素

1. 块级元素：独占一行，对宽度的属性值生效；如果不给宽度，块级元素就会默认为浏览器（或父类）的宽度，即：100%的宽
<caption>定义表格标题　　　　　 <dd>定义列表中的定义条目　　　　　　
<div>文档中的某一区域　　　　　　<dl>定义列表　　　　　　
<dt>定义列表的标题　　　  　　　 <form>表单　　　　　　
<h1>~<h6>标题的级别　　　　　　  <hr>水平线，换行不换段　　　 　　　　<li>列表中的项目　　　　  　　　　<ol>有序列表　　　　　　 
<ul>无序列表　　　　　　  　　　　<p>段落标签　　　　　　
<table>表格　　　　　　　　　　　 <tbody>表格的主体　　　　　  　　　　<tfoot>表格的页脚　　　　　　　　 <tr>表格中行　　 　　　　
<td>表格中的标准单元格     　　　<thead>表格的表头

2. 行内元素：可以一行存在多个标签，对宽高属性值不生效，完全靠内容撑开宽高！
　　<a> 超链接　　<b>加粗　　<br>换行　　<i>倾斜　　
　　<span>无特殊含义　　<sub>下标问本　　<sup>上标文本

3. 行内块元素：结合的行和块的特点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；
　　<input> 表单元素　　<img> 图片标签　　
　　<select> 下拉表单元素　　<textarea> 文本域表单元素

4. 图像标签

<img src="图像URL">
内置属性：
src 是img标签必须携带的属性，用于指定图像路径和文件名
alt 替换文本（当图像显示不出文字时）
title 鼠标放在图片上显示的文字
width 设置图像的宽度
height 设置图像高度
border 设置边框如 border="1px solid black"：设置1px的黑色实线边框

5. 超链接a标签

<a href="#">链接文本</a>
href 必须属性，用于指定链接目标的url地址
target 打开链接方式（_self默认当前页面打开 _blank以新窗口打开 _parent以父类窗口打开）

网页元素链接：图片，表格，等等都可作为链接
<a href="链接"><img src="url"></a>

外部链接：<a href="http://www.qq.com">腾讯</a>

内部链接：<a href="内部资源">内部链接</a>

空链接：<a href="#">空链接</a>

下载链接：<a href="....zip">下载文件</a>

锚点链接：快速到此网页的某个位置
如：<a href="#live">个人生活</a>
   <h3 id="live">个人生活</h3>
   上述点击a标签内容会跳转到h3标签位置

内联框架链接：通过a标签设置内联框架的内容
<a href="one.html" target="one">跳转</a>
<iframe name="one" src="my.html"></iframe>
将iframe中原本的my.html替换成a中的链接one.html

6. 特殊字符

  表示空格
< 表示<
> 表示>
© 表示版权符©

7. 列表标签：分为无序、有序、自定义列表

无序列表
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
有序列表
<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>
自定义列表
<dl>
	<dt></dt>
	<dd></dd>
	<dd></dd>
	<dt></dt>
	<dd></dd>
	<dd></dd>
</dl>
自定义列表的<dt>表示标题，<dd>表示内容
上述列表标签中如<li><dt><dd>都是块级标签，各占一行，可以在其中放入任何东西

8. 表格标签

<table border="" cellspacing="" cellpadding="">
	<tr>
		<th>Header1</th>
		<th>Header1</th>
	</tr>
	<tr>
		<td>Data1</td>
		<td>Data2</td>
	</tr>
	<tr>
		<td>Data1</td>
		<td>Data2</td>
	</tr>
</table>
表头单元格标签
<th></th> 加粗显示居中，用来表示表格列标题

表格属性：可以直接写在行内样式
align 表格对齐方式 left偏左 center居中 right偏右
border 边框 1 或者 ""
cellpadding 字与边框的距离
cellspacing 单元格与单元格之间的距离
width 定义表格宽度
height 定义表格高度
合并单元格时要注意删除多余单元格
rowspan：向下合并单元格。  
colspan：横向合并单元格。

表格属性：直接在CSS属性写入
border-collapse:collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开,设置无间隔
caption-side:top、bottom、inherit;属性规定表格标题的位置

表单结构标签
<caption></caption> 表格标题
<thead></thead> 头部区域
<tbody></tbody> 主体区域
<tfoot></tfoot> 底部区域

表单标签

表单域
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
表单域属性
action 	提交的url地址
method  get/post 显示提交或隐藏提交
name  指定表单的名称

<input>表单控件
<input type="属性值">
type属性值有
text		单行输入字段
password		隐藏输入字段
submit		提交按钮
reset		重置按钮
radio 		单选按钮
checkbox		复选按钮
button		按钮
hidden		隐藏输入字段
file  		输入字段和浏览按钮，供文件上传
date 		日期选择
email		定义邮箱输入
<input >表单控件常用属性
name 	定义input元素名称
value 	定义input元素的值
maxlengh	定义最大输入长度
size 		定义输入框大小
checked=“checked”	定义复选框第一次被选中
placeholder		定义输入的提示文本
disable 	设置表单元素是否禁用（可提交）
readonly 	设置表单元素是否可读（不可提交）

select下拉表单 表单控件
<select name="">
	<option value=""></option>
	<option value=""></option>
	<option value=""></option>
</select>

taxtarea 文本域表单控件
<textarea rows="" cols=""></textarea>
rows	代表行数	
cols	代表一行输入个数

CSS

1. CSS的引入方式（三种）

1.1 内部样式表

<style>
	选择器
</style>

1.2 行内样式表

<p style="color:pink;"> 内容 </p>

1.3 内部样式表

通过link导入

<link rel="stylesheet" href="css文本路径">

2. 常用选择器

基础选择器：标签选择器、类选择器、id选择器、通配符选择器
复合选择器：后代选择器、子选择器、并集选择器、伪类选择器

2.1 基础选择器

标签选择器
标签名 {}

类选择器
.类名 {}

id选择器
#id名 {}

通配符选择器
* {}

2.2 复合选择器

后代选择器
元素1 元素2 {}    （元素1是元素2的直接父类选择器）

子选择器
元素1>元素2 {}		(元素2被元素1包含就行)

并集选择器
元素1,元素2 {}		(同时选择多个元素)

伪类选择器
以a为代表
a:link {} 		选择所有未被访问的链接
a:visited {}	选择所有已被访问的链接
a:hover {}		选择鼠标指针位于其上的链接
a:active {}		选择鼠标按下去位弹起的链接

3. display模式转换

display:block;			转换块级元素
display:inline;			转换行内元素
display:inline-block;	转换为行内块元素

4. CSS的背景

属性名	属性描述	属性值
background-color	背景颜色	transparent透明
background-image	背景图片	url(路径)
background-repeat	背景平铺	no-repeat 不平铺 repeat-x x平铺
background-position	背景图片位置	center 中 top上 right右 bottom下 left 左
background-attachment	背景图像固定	scroll 滚动 fixed固定

复合写法
background: 背景颜色: 地址 : 平铺 : 滚动 : 位置

background: rgba(0,0,0,0.5) 背景颜色半透明度

5. CSS盒子模型

盒子模型的组成：边框、内/外边距、实际内容

5.1 border边框

边框的复合写法
border: border-width || border-style || border-color

border-top/right/left/bottom 设置部分边框

border-radius: length;  length=50%/50px;

5.2 内外边距

auto 居中
内边距：
padding 一个值：上下左右 两个值：上下 左右 三个值：上 左右 下 四个值：上 右 下 左 
外边距：
margin 一个值：上下左右 两个值：上下 左右 三个值：上 左右 下 四个值：上 右 下 左

5.3 嵌套块元素塌陷解决办法

为父元素加上边框
overflow：hidden
为父元素加上内边框

6. CSS字体属性和文本属性

6.1 字体属性

属性名	属性描述	属性值
font-family	字体类型	“微软雅黑”
font-size	字体大小	px为单位
font-weight	字体粗细	bold 粗 normal 正常
font-style	字体风格	italic 斜体 normal 正常

复合字体写法
样式
font: font-style font-weight font-size/line-height font-family
例子：font: italic 700 16px “微软雅黑”

6.2 文本属性

属性名	属性描述	属性值
color	颜色	十六进制英文翻译 rgb
text-align	水平对齐方式	center left right
text-decoration	装饰文本	underline 下划线 overline上划线 line-through 删除线 none 默认
text-indent	单行缩进	em（字）
line-height	行间距	px
letter-spacing	水平字符间距	px