<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
html 文档结构:
1, <!DOCTYPE Hhtml> 声明为html5 文档.
2, <html></html> 是文档的开始标记和结束标记.
是HTML页面的根元素, 在他们之间是文档的头部(head)和主体(body)
3, <head></head> 定义了HTML文档的开头部分. 他们之间的内容不会在浏览器的文档窗口显示.
其中包含了文档的元(meta)数据.
4, <title></tiile> 定义了网页标题, 在浏览器标题显示.
5, <body></body> 之间的文本是课件的网页主体内容.
注意: 对于中文网页需要使用<meta charset="utf-8">声明编码, 否则会出现乱码.
?有些浏览器会设置GBK为默认编码, 此时, 你需要设置为<meta charset="gbk">
?在必要的时候可以添加一个兼容的开源代码块.来兼容各种浏览器
html 标签是由尖括号包围的关键字, 例如<html>, <div>等
html 标签通常是成对出现的. 例如<div></div> , 第一个标签是开始, 第二个标签是结束. 结束标签会有斜线.
也有一部分呈现的, 比如<br/>、<hr/>、<img src="1.jpg" />等。
标签里面可以有若干属性,也可以不带属性.
标签语法:
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
几个重要的属性:
id: 定义标签的唯一ID, HTML文档树中唯一
class: 为html元素定义一个或多个类名(classname)(CSS样式类名)
style: 规定元素的行内样式(css样式)
html 注释: ?<!--内容-->
<head></head> ?之间的内容是给浏览器看的, 不是给用户看的.
其中可以存放:
标签意义
<title></title> ?定义网页标题美 /‘ta?tl/
<style></style> ?定义内部样式表英 /sta?l/
<script></script> 定义JS代码或引入外部JS文件美 /skr?pt/
<link/> ????引入外部样式表文件美 /l??k/
<meta/> ??定义网页原信息英 /‘met?/
Meta
<meta> 元素可提供有关页面的原信息(meta-information), 针对搜索引擎和更新频度的描述和关键词
<meta> 标签位于文档头部, 不包含任何内容.
<meta> 提供的信息是用户不可见的.
meta标签的组成: meta 标签共有两个属性, 他们分别是 http-equiv属性和name属性,
不同的属性又有不同的参数值, 这些不同的参数值就实现了不同的网页功能.
1, http-equiv属性, 相当于http的文件头作用, 可以向浏览器传回一些有用的信息, 以帮助
??正确的显示网页内容, 与之对应的属性值为content, content 中的内容其实就是哥哥参数的变量值.
<!--2秒后跳转到对应的网址，注意引号 content 内容 美 /‘kɑnt?nt/ ??-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible (开启最高级渲染)" content="IE=edge">
2, name属性: 主要用于描述网页, 与之对应的属性值为content,
??content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的.
??<meta name="keywords" content="meta总结, html meta, meta属性,meta跳转">
??<meta name="description" content="老男孩教育python学院">
<body> </body> ??之间内容是给用户看的
1,其常用标签:
1,独占一行的: 块级标签,
1, h1~h6 ?# 1~6级标题
2, p ?????# 段落标签
3, div ???# 定义一个块级元素, 并不实际意义, 主要通过css样式为期赋予不同表现.
4, hr ????# 横线
5, li ?# 有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
6, tr ????# <tr> 标签定义 HTML 表格中的行。
2,内容在一行显示的: 行内标签
1, a ?????# 导入链接(可以使网页链接 ?也可以是绝对路径, 图片在通文件夹时, 导入图片名)
2, span ??# 标签用来定义内联(内行)元素, 并无实际意义, 主要通过css样式为其赋予不同的表现.
3, img ?# (图片导入).
<img src="图片路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息"
width="宽" height="高(高和宽两个属性只用一个会自动等比缩放)">
4, b/u/i/s ?# b 加粗 ?U 下划线 ?i 倾斜 ?s 删除(在文字上有条横线)
5, input
3, br 换行 ??hr 横线(水平线)
特殊字符:
空格:
??>: >
??<: ⁢
??&: &
??￥: ¥
版权: ©
注册: ®
div标签 和span标签
div标签是用来定义一个块级元素, 并无实际的意义, 主要通过CSS样式为其赋予不同的表现.
span标签用来定义内联(内行)元素, 并无实际的意义, 主要通过CSS样式为其赋予不同的表现.
块级元素与行内元素的区别:
所谓的块级元素, 是以另起一行开始渲染的元素, 行内元素则不需要另起一行.
如果单独在网页中插入这两个元素, 不会对页面产生任何的影响.
这两个元素是专门为定义CSS样式而生的.
注意:
关于标签嵌套: 通常块级元素可以包含内联元素或者某些块级元素,
但是内联元素不能包含块级元素, 它只能包含其他内联元素.
p标签不能包含块级标签, p标签也不能包含p标签.
2, 标签的嵌套
1, 标签可以嵌套标签(块级标签可以包内敛标签)
注意事项:
尽量不要用内敛标签嵌套块级标签.
P标签不能嵌套p标签
p标签不能嵌套div标签
<img>标签: 导入图片的标签
<img src="图片的路径" alt="图片未加载成功的时候的提示" title="鼠标悬浮是提示的信息"
width="宽" height="高(宽高两个属性只设置一个的时候,自动等比缩放)">
a标签: 超链接标签
所谓的超链接是指从一个网页指向另一个目标的连接关系, 这个目表可以是另一个网页,
也可以是相同网页上的不同位置(网址链接),还可以是一个图片(网址链接), 一个电子邮件地址(emall)
一个文件(路径, 不常用), 甚至是一个应用程序.
么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
href属性指定目标网页地址。该地址可以有几种类型：
绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"）
target：
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页
列表 ??
分为 无序列表(ul)
<ul type="disc">
?????<li>第一项</li>
?????<li>第二项</li>
</ul>
disc 实心圆点, 默认值
circle 空心圆圈
square 实心方块
none 无样式
有序列表(ol) ?
<ol type="1" start="2">
?<li>第一项</li>
?<li>第二项</li>
</ol>
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
标题列表(dl)(又叫做自定义列表)
<dl>
?<dt>标题1</dt>
?<dd>内容1</dd>
?<dt>标题2</dt>
?<dd>内容1</dd>
?<dd>内容2</dd>
</dl>
表格 ???
表格是一个二维数据空间, 一个表格由若干个行组成, 一行又有若干个单元格组成,
单元格里可以包含数字, 列表, 图案, 表单, 数字符号, 预设文本和其他的表哥等内容.
表格最重要的目的是显示表格类数据, 表格类数据是指最适合组织为表格格式
(即按行和列组织.)的数据.
表格的基本结构:
<table>
???<thead> # 表头
???????<tr>
???????????<th>序号</th> # 表格内部标题标签 ?th == text head
???<th>姓名</th>
???????</tr>
???</thead>
???<tbody> ?# 表格内容
???????<tr> # 每行
???????????<td>2</td>
???????????<td>Yuan</td>
???????</tr>
???</tbody>
</table>
表格属性:
border: 表格边框
cellpadding:内边距
cellspacing:外边距
width:像素百分比(最好通过css来设置长宽)
rowspan:单元格竖跨多少行
colspan:单元格横跨多少行(即合并单元格)
表单 ??form
表单的功能让:
表单用于向服务器传输数据,从而实现用户与web服务器的交互
表单能够包含input系列标签, 比如文本字段, 复选框, 单选框, 提交按钮等等.
表单还可以包含textarea, select, fieldset, label标签.
表单属性
属性描述
accept-charset规定在被提交表单中使用的字符集（默认：页面字符集）。
action规定向何处提交表单的地址（URL）（提交页面）。
autocomplete规定浏览器应该自动完成表单（默认：开启）。
enctype规定被提交数据的编码（默认：url-encoded）。
method规定在提交表单时所用的 HTTP 方法（默认：GET）。
name规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate规定浏览器不验证表单。
target规定 action 属性中地址的目标（默认：_self）。
1, action 控制往哪提交数据.
2, method get/post, http 请求的两种方法.
3, enctype 当
input
<input> 元素会根据不同的type属性, 变化为多种形态.
type值属性表现形式对应代码
text单行输入文本<input type="text"/>
password密码输入框<input type="passwor"/>
date日期输入框<input type="date"/>
checkbox复选框<input type="checkbox" checked="checkde"/>
radio单选框 <input type="radio"/>
submit提交按钮<input type="submit" value="提交"/> ??# type 表示提交按钮,后面的value表示按钮上显示的字
reset重置按钮<input type="reset" value="重置"/>
button普通按钮<input type="button" value="普通按钮"/>
hidden隐藏输入框<input type="hidden"/>
file文本选择框<input type="file">
属性说明:
name: 表单提交时的"键", 注意和id的区别
value: 表单提交时, 对应项的值.
type="button" , "reset","submit" 时, 为按钮上显示的文本内容
type="text", "password", "hidden"时, 为输入框的初始值
type="checkbox", "radio", "file", 为输入相关联的值.
checked: radio和checkbox默认被选中的项
readonly: text和password设置只读
disabled: 所有input 均适用.
select 标签 ?# 可以用来选择, (下拉框那种的)
例子:
<form action="" method="post">
?<select name="city" id="city">
???<option value="1">北京</option>
???<option selected="selected" value="2">上海</option>
???<option value="3">广州</option>
???<option value="4">深圳</option>
?</select>
</form>
属性说明:
multiple: 布尔属性, 设置后为多选, 否则默认单选
disabled: 禁用
selected: 默认选中该项
value: ?定义提交时的选项值
lable标签
定义<label> 标签, input 元素定义标注(标记)
说明:
label 元素不会像用户呈现任何特殊效果.
<label> 标签的for属性值应当与相关元素的id 属性值相同.
例子:
<form action="">
?<label for="username">用户名</label>
?<input type="text" id="username" name="username">
</form>
textarea多行文本:
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
属性说明:
name: 名称
rows: 行数
cols: 列数
disabled: 禁用
前端基础------CSS
原文地址：https://www.cnblogs.com/hfbk/p/9588727.html