文章目录
1.HTML
HTML(HyperText Markup Language):超文本标记语言
- 结构:HTML
- 表现:CSS
- 行为:JavaScript
标签 | 描述 |
---|---|
<HTML> | 定义 HTML 文档 |
<head> | 定义关于文档的信息 |
<title> | 定义文档的标题 |
<body> | 定义文档的主体 |
1.2 基础标签
标签 | 描述 |
---|---|
<h1> ~ <h6> | 定义标题,h1最大,h6最小 |
<font> | 定义文本的字体、字体尺寸、字体颜色 |
<b> | 定义粗体文本 |
<i> | 定义斜体文本 |
<u> | 定义文本下划线 |
<center> | 定义文本居中 |
<p> | 定义段落 |
<br> | 定义折行 |
<hr> | 定义水平线 |
HTML 原代码 | 显示结果 | 描述 |
---|---|---|
< | < | 小于号或显示标记 |
> ; | > | 大于号或显示标记 |
& | & | 可用于显示其它特殊字符 |
" | “ | 引号 |
® | ® | 已注册 |
© | © | 版权 |
™ | ™ | 商标 |
| 不断行的空白 |
1.3 图片、音频、视频标签
标签 | 描述 |
---|---|
<img> | 定义图片 |
<audio> | 定义音频 |
<video> | 定义视频 |
-
img:定义图片
- src:规定显示图像的 URL
- height:定义图像的高度
- width:定义图像的宽度
-
audio:定义音频。支持的音频格式:MP3、WAV、OGG
- src:规定音频的 URL
- controls:显示播放控件
-
video:定义视频。支持的音频格式:MP4, WebM、OGG
- src:规定视频的 URL
- controls:显示播放控件
1.4 超链接标签
标签 | 描述 |
---|---|
<a> | 定义超链接,用于链接到另一个资源 |
- href:指定访问资源的URL
- target:指定打开资源的方式
- _self:默认值,在当前页面打开
- _blank:在空白页面打开
- _self:默认值,在当前页面打开
1.5 列表标签
标签 | 描述 |
---|---|
<ol> | 定义有序列表 |
<ul> | 定义无序列表 |
<li> | 定义列表项 |
- type:设置符号的类型
1.6 表格标签
标签 | 描述 |
---|---|
<table> | 定义表格 |
<tr> | 定义行 |
<td> | 定义单元格 |
<th> | 定义表头单元格 |
-
table:设置符号的类型
- table:定义表格
- width:宽度
- border:边框
- cellpadding:定义内容和单元格的距离
- cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
- bgcolor:背景色
- align:对齐方式
- tr:定义行
- bgcolor:背景色
- align:对齐方式
- td:定义单元格
- colspan:合并列
- rowspan:合并行
- th:定义表头单元格
- :表格标题
- table:定义表格
1.7 布局标签
标签 | 描述 |
---|---|
<div> | 定义 HTML 文档中的一个区域部分,经常与 CSS 一起使用,用来布局网页 |
<span> | 用于组合行内元素。 |
1.8 表单标签
标签 | 描述 |
---|---|
<form> | 定义表单 |
<input> | 定义表单项,通过type属性控制输入形式 |
<label> | 为表单项定义标注 |
<select> | 定义下拉列表 |
<option> | 定义下拉列表的列表项 |
<textarea> | 定义文本域 |
1.9 表单项标签
<input>:表单项,通过type属性控制输入形式
input
标签有多个 type
属性。 type
属性的取值不同,展示的效果也不一样
type 取值 | 描述 |
---|---|
text | 默认值。定义单行的输入字段 |
password | 定义密码字段 |
radio | 定义单选按钮 |
checkbox | 定义复选框 |
file | 定义文件上传按钮 |
hidden | 定义隐藏的输入字段 |
submit | 定义提交按钮,提交按钮会把表单数据发送到服务器 |
reset | 定义重置按钮,重置按钮会清除表单中的所有数据 |
button | 定义可点击按钮 |
2. CSS
Cascading Style Sheet(层叠样式表),用于控制网页表现。
2.1 css 导入方式
CSS 导入方式就是 css 代码和 html 代码的结合方式。
CSS 导入 HTML有三种方式:
-
内联样式:在标签内部使用style属性,属性值是css属性键值对
<div style="color: red">Hello CSS~</div>
内联方式只能作用在这一个标签上,如果其他的标签也想使用同样的样式,就需要在其他标签上写上相同的样式。复用性太差。
-
内部样式:定义<style>标签,在标签内部定义css样式
<style type="text/css"> div{ color: red; } </style>
可以做到在该页面中复用。
-
外部样式:定义link标签,引入外部的css文件
编写一个css文件。名为:demo.css,如下:
div{ color: red; }
在html中引入 css 文件。
<link rel="stylesheet" href="demo.css">
这种方式可以在多个页面进行复用。其他的页面想使用同样的样式,只需要使用
link
标签引入该css文件。
2.2 css 选择器
css 选择器就是选取需设置样式的元素(标签),比如如下css代码:
div {
color:red;
}
如上代码中的 div
就是 css 中的选择器。、
-
元素选择器
格式:
元素名称{color: red;}
-
id选择器
格式:
#id属性值{color: red;}
-
类选择器
格式:
.class属性值{color: red;}