HTML和CSS的简单笔记

HTML

HTML简介

• HTML全称为超文本标记语言（Hyper Text Markup Language）
• HTML是一种标记语言，而不是编程语言

HTML基本标签

HTML基本结构

`

` * `` 声明为 HTML5 文档 * `` 元素是 HTML 页面的根元素 * `` 元素包含了文档的元（meta）数据 * `` 元素包含了可见的页面内容

标题标签

<h1></h1>
<h2></h2>
.
.
.

<h6></h6>
特点：
1.字体变大变粗
2.h1~h6逐渐变小
3.独占一行（默认宽度100%）

段落标签

<p></p>

特点：

1. 独占一行
2. 段落与段落之间存在间隙

换行标签

<br/>

特点: 换行

水平线标签

<hr/>

特点: 产生一条水平线

文本格式化标签

文本加粗：
　<b></b>
　<strong></strong>

斜体：
　<i></i>
　<em></em>

下划线：
　<u></u>
　<ins></ins>

删除线：
　<s></s>
　<del></del>

转义字符

` `	空格
`<`		左箭头
`>`		右箭头

图像标签

<img>

特点：

1. 不独占一行
2. 可以设置宽高
   属性：
3. src 引入图片地址
4. alt 图片加载失败的提示信息
5. title 鼠标悬停时的提示信息

<img src="./img/01.jpg" alt="loading failed" title="photo">

路径：
1.绝对路径
网络地址：https://
本地磁盘：C:\Users\picture\01.jpg
2.相对路径
./ 当前所在的文件夹
…/ 上一级文件夹

链接标签

<a href=""></a>

特点：

1. 不独占一行
2. 设置宽高不生效
   属性：
   1.href 链接地址
   2.target 控制页面跳转方式
   _self 当前页面发生跳转
   _blank 新建页面跳转

网络地址 https://
<a href="https://www.baidu.com"></a>

本地文件
<a href="01.html"></a>

下载文件
<a href="./img.zip"></a>

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

规范：a标签内不能嵌套a标签

锚点定位

跳转到相应id的标签
`

`

列表标签

<ol></ol>
<ul></ul>

有序列表：<ol></ol>
属性：

1. type 序号类型：1 A a i I
2. start 开始的序号
3. reversed 序号反转

注意：ol下面只能嵌套<li></li>

无序列表：<ul></ul>

自定义列表：dl>dt+dd
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>

表格标签

`<table>
	<caption></caption>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>`

属性：

1. border 边框
2. cellspacing 控制边框与边框之间的间隙
3. cellpadding 控制内容与边框之间的间隙
4. align 对齐方式

• left
• center
• right

跨行跨列

• rowspan 跨行
• colspan 跨列

表单标签

<form action="" method=""> First name:
Last name: `

属性：

1. action 提交的地址
2. method 提交的方式

文本框标签

<input type="text">

input输入框特点：

1. 不独占一行
2. 可以设置宽高

属性：

1. type 输入框的类型

• text 文本输入框
• password 密码输入框
• radio 单选框
• checked 复选框
• file 单个文件上传
• image 图片形式的上传按钮
• button 按钮
• submit 提交按钮 需要配合form表单来使用

2. value 默认值（提交的键值）
3. name 提交的键名
4. placeholder 占位符
5. maxlength 最大输入字符数
6. checked 默认选中
7. disabled 禁止选中
8. multiple 选择多个文件

块级元素标签

<div></div>

div特点：
1.独占一行
2.可以设置宽高
div属性：
<div style="width: 100px; height: 100px;">
</div>

CSS

CSS概述

层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

一般：

• HTML是用来编写网页的骨架
• CSS是用来美化网页
• javaScript语言是用来为网页添加交互的效果

CSS引入

1. 内联方式(行内样式): 在标签里面写style属性
2. 内部引入:通过head标签里的style属性
3. 外部引入:通过head标签里的link标签引入

基本选择器

1. 标签选择器

通过标签进行选择，所有标签都会应用此样式

h1{
声明1;
声明2;
...
}

2. 类选择器

通过标签的class属性来选择一类标签的样式

.classname{
声明1;
声明2;
...
}

3. id选择器

id选择器是通过标签的id来进行选择，id是一个标签的唯一标识，id必须保证全局唯一

#id{
声明1;
声明2;
...
}