前端基础------CSS
<!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: 禁用
