WEB基础知识个人总结
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
WEB基础知识个⼈总结
【学习的⽹站是主要是W3school，还加上⼀些其他搜索学习到的内容，仅在博客做个⼈整理】
HTML
⼀、标签——尖括号围成的关键词，成对出现。
※使⽤时必须符合标签嵌套规则
1.声明
（1）<!DOCTYPE html>：HTML5⽂档类型声明
（2）对于中⽂⽹页需要使⽤ <meta charset="utf-8"> 声明编码
2.链接
<a>：链接【在href属性中指定链接的地址】，在标签⾥添加⽂本标签或图⽚标签。
target属性：target="_blank"时会在新窗⼝打开⽂档
name属性：规定锚（anchor）的名称。
使⽤命名锚（named anchors）时，可以直接跳⾄页⾯中的某个链接。
3.布局
<div>：块元素，以新⾏开始和结束。
组合其他HTML元素，常与CSS⼀同使⽤，可⽤于对⼤的内容块设置样式属性。
<span>：内联元素，不会以新⾏开始和结束。
4.⽂本
<title>：⽂档标题
<h1> - <h6>：html标题
<body>：可见的页⾯内容
<p>：普通段落
<strong>：粗体⽂本，强调强调内容
<b>：粗体⽂本
<em>：强调内容，浏览器⽤斜体⽂本展⽰
<i>：斜体⽂本
<hr /> ：创建⽔平线
<br /> ：不产⽣新段落的情况下【换⾏】
<pre>：定义预格式化的⽂本，保留空格和换⾏。
缩写或⾸字母缩略语。
把⿏标移⾄缩略词语etc.上时，可展⽰完整版本"etcetera"。
<abbr title="etcetera">etc.</abbr>：定义缩写
<q>：定义短的引⽤。
会为 <q> 元素包围引号
<blockquote>：定义块引⽤，插⼊换⾏和外边距
<del>：删除线
<ins>：下划线
5.多媒体
<img />：图像【图像的名称和尺⼨是以属性的形式提供的】，源属性src="图像URL地址"，替换为本属性alt="xxx"
<video>：定义视频内容
<audio>：定义声⾳内容
⼦标签<source>：定义⽂件所在地
⼦标签<track>：定义轨道
6.序列化列表
（1）<ul>⽆序列表标签
（2）<ol>有序列表标签
有序、⽆序列表项均始于 <li>
（3）<dl>⾃定义列表标签
7.表格
<table> 定义 HTML 表格。
<tr>：定义表格中的⾏
<th>：定义表格中的表头
<td>：定义表格中的数据（table data）
8.输⼊表单
定义⽤户输⼊
（1）<from>：块级元素，属性name、action、method、enctype
（2）<input>：type属性、checked预选、name、value页⾯所显⽰的值
type的值类型：
text：⽂本框
password：密码框
checkbox：复选框
radio：单选框
button：按钮
submit：提交，将表单数据发送到<form>标签中action属性所指值的⽹页中/向表单处理程序（处理输⼊数据的脚本的服务器页⾯）提交
reset：重置
hidden：
（3）<datalist>：为 <input> 元素规定预定义选项列表。
其id属性必须与<input>标签中的list属性值相同
（4）<select>：下拉列表，属性name
⼦标签<option>：属性name、value、selected
（5）<textarea>：⽂本域
（6）<fieldset>：绘制⼀个带标题的框
⼦标签<legend>：表⽰标题
9.画布
<canvas>
⼆、元素——从开始标签到结束标签的所有代码。
⼤多数HTML元素可拥有属性
⼤多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）
三、属性——提供了有关 HTML 元素的更多的信息
※以名称/值对的形式出现：xxx=“xxx”（若属性值中含有双引号则外围必须使⽤单引号）
※属性在开始标签中规定。
1.⼤多数元素都有的属性名称：
id
class
2.<style> HTML样式元素属性名称：
background-color：背景颜⾊
font-family：⽂本字体系列
color：⽂本颜⾊
font-size：⽂本字体尺⼨
text-align：⽂本⽔平对齐⽅式
3.<table>元素属性名称：
border：表格边框
CSS
⼀、样式表
1.外部样式表——当样式需要被应⽤到很多页⾯时
定义外部CSS⽂件，在<head>标签中使⽤链接式<link>：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2.内部样式表——单个⽂件需要特别样式时
<head>标签中创建⼀个<style>标签，其中添加CSS代码：
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
3.内联CSS
在相关标签中使⽤style属性：
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
⼆、语法
1.选择器——需要改变样式的HTML元素
（1）派⽣选择器：
只有<li>元素中的<strong>元素适⽤：
li strong {
font-style: italic;
font-weight: normal;
}
（2）id选择器
以#定义，只能在每个HTML⽂档中出现⼀次
（3）类选择题
以.定义
类名的第⼀个字符不要使⽤数字
2.语法——由属性和值构成，由冒号":"分开
color（颜⾊）:值（red）、⼗六进制颜⾊值（#FF0000）、RGB值（rgb(255,0,0)）background（背景颜⾊）:
font-size（字体⼤⼩）: font-family（字体样式）: font-style（）
font-weight
margin（）
padding（）。