前端基础—html
1. 前端是什么？
- 前端对于网站来说，通常是指网页，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。
2. web的原理
- 浏览器地址栏输入URL-->浏览器往服务端发送消息-->服务端接收消息-->服务端回消息（从文件中读取数据）-->浏览器收消息（按照一个约定好的规则展示出来）
3. HTML初识
- html语言就是一些特殊的符号，不同的符号有不同的显示效果，相当于是网页的骨架，也就是网页的结构
4. HTML是什么？
- 全称超文本标记语言；
- 本质上是浏览器可识别的规则；
- 是一种标记语言，不是一种编程语言；
5. HTML的基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>：声明标签<html lang="zh-CN"></html>：html标签是网页的根标签，所有的标签全部都要写在这对根标签内，lang表示当前网页显示内容的主要语言，en为英语，zh-CN主要为中文<meta charset="UTF-8">:<head></head>:表示头标签，主要定义网页的头部包括文档的标题，还可以引用JS中的脚本，CSS中的格式等。<title></title>:标签页显示标签，也就是文档的标题标签。<body></body>:网页文档的主体，包含用户所看到的的所有内容，如：文本，超链接，图片，表格等。
6. 标签的分类
-
成对出现的标签
- 段落标签：
<p></p> - 标题标签：
<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6> - 文本标签：
<font size="" color=""></font> - 文本加粗：
<strong></strong> or <b></b> - 文本倾斜：
<em></em> or <i></i> - 删除线标签：
<del></del> or <s></s> - 下划线标签：
<ins></ins> or <u></u>
- 段落标签：
-
单个标签
- 注释标签：
<!-- 注释 --> - 换行标签：
<br> or <br /> - 水平线标签：
<hr> or <hr />
- 注释标签：
-
标签内的重要属性
id:定义标签的唯一ID，一个HTML文件中唯一；class:为html元素定义一个或多个类名；style：规定元素的行内样式。
7. 常用标签
-
head标签
-
charset编码
- 格式：
<meta charset="UTF-8"> - 常用设置：
ASCII/ANSI/Unicode：英语 GBK ：亚洲通用字符集 GB2312：中文简体 Big5 ：台澳港繁体 UTF-8：世界通用字符集 - 格式：
-
name
-
关键字
<meta name="keywords" content="">作用是告诉搜索引擎站点关键字。SEO优化使用。
-
网页描述
<meta name="discription" content="">作用是告诉搜索引擎站点的主要内容。这个description是给SEO和用户看的。
-
作者
<meta name="author" content="name">告诉搜索引擎制作网页的制作者。
-
文件检索
<meta name="robots" content="all | none | index | noindex | follow | nofollow">有时候会有一些站点内容，不希望被 robots 抓取而公开。为了解决这个问题，robots 开发界提供了两个办法：一个是robots.txt，另一个是 robots meta 标签。 其中的属性说明如下： all：（默认）文件将被检索，且页面上的链接可以被查询； none：文件将不被检索，且页面上的链接不可以被查询； index：文件将被检索； follow：页面上的链接可以被查询； noindex：文件将不被检索，但页面上的链接可以被查询； nofollow：文件可以被检索，但页面上的链接不可以被查询。
-
-
http-equiv 网页重定向
<meta http-equiv="reflesh" content="5; http://www.baidu.com">网页自动跳转：网页5秒后跳转到百度首页。
-
设置 icon 图标
<link rel="icon" href="icon文件">
-
-
body标签
- 基本标签
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行--> <br> <!--水平线--><hr>- 特殊字符
符号 字符代码 空格 &nvsp;< <> >& &¥ ¥© ©® ®参考链接：HTML特殊字符编码表
-
div标签和span标签
- 特点：这两种标签没有默认样式效果，方便后续使用
CSS调整样式。 - div和span的区别：
div块级标签，标签独占一行；span行内标签也称内联标签，默认都在一行显示。
- 特点：这两种标签没有默认样式效果，方便后续使用
-
块级标签和行内标签
- 块级标签：自己独占一行
p标签h标签hr标签div标签
- 行内标签：默认在一行显示
b标签i标签u标签s标签span标签
- 标签的嵌套
- p标签不能包含p标签和div标签
- 块级标签可以包含内联标签
- 块级标签：自己独占一行
-
img标签
- 格式：
<img src alt title width height> - 参数：
src : 图片的来源（必写属性） alt : 替换文本 ，图片不显示的时候显示的文字（重要性：1.SEO优化 2.盲人阅读需求） title : 提示文本，鼠标放到图片上显示的文字 width : 图片宽度 height : 图片高度 PS：图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放 - 格式：
-
a标签
- 格式：
<a href title target>填写内容</a> - 参数：
href ：去往的路径、跳转的页面， (必写属性) title ： 提示文本，鼠标放到链接上显示的文字 target=”_self" （默认值），在自身页面打开（关闭自身页面，打开链接页面） target=”_blank” 打开新页面，（自身页面不关闭，打开一个新的链接页面） PS：当 href 的值为 javascript:void(0); 或 javascript:; ，表示超链接不做任何事情，不做任何跳转。-
锚链接
-
定义：锚链接也称锚点链接，命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，自动跳转到我们设置锚点的位置，类似于我们阅读书籍时的目录页码或章回提示。
锚点链接可以跳转到页面的任何位置。一般用于在页面下面的时候，点击回到最上面。锚点链接的名称可以随意取，只起到标记作用。
-
其原理是按照标签的id属性来找到标签，从而跳转到对应位置的。
<p id="AAA"> </p> ... <a href="#AAA"></a> <!-- 超链接到锚点 --> -
-
空链接
<a href="#">空链</a>PS：空链相当于 #top，实际点击此链接的时候会跳转到页首的位置。
- 格式：
-
列表
-
无序列表
-
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>- type属性：
disc实心圆点，默认值circle空心圆点square实心方块none无样式
- type属性：
-
有序列表
<ol type="1" start="1"> <li>第一项</li> <li>第二项</li> </ul>- type属性：
- 1 数字列表，默认值
- A 大写字母排序
- a 小写字母排序
- I 大写罗马字母排序
- i 小写罗马字母排序
- start属性为设置起始值
- type属性：
-
标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
-
-
表格
-
基本格式：
<table width height border cellspacing cellpadding bgcolor align> <!--表头--> <caption>表名</caption> <thead> <tr> <th></th> <th></th> <!--th为表格标题，也就是表结构，会自动加粗--> </tr> </thead> <!--表主体--> <tbody> <tr> <td></td> <td></td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> </tr> </tfoot> </table>PS：写 <thead> <tbody> <tfoot>对SEO更好，不写也没问题。 -
参数
width：宽度 height：高度 border：边框宽度 cellspacing：单元格与单元格的距离 cellpadding：内容距边框的距离 bgcolor：表格背景颜色 align=”left | right | center” 如果直接给表格用align=”center” 表格居中 如果给tr或者td使用 ，tr或者td内容居中。 -
合并单元格
-
横向合并单元格：
<td colspan="num">填写内容</td><tr> <td colspan="2">Abner</td> <!--<td>21</td>--> </tr> -
纵向合并单元格：
<td rowspan="num">填写内容</td><tr> <td>Sunny</td> <td rowspan="2">22</td> </tr> <tr> <td>Marry</td> <!--<td>25</td>-->
-
-
-
form标签
-
格式：
<from action='url' method=""></from>-
主要属性：
-
action负责处理信息，信息提交至指定的web服务器进行处理。 -
method="get|post"get：通过地址栏提供（传输）信息（可以在地址栏里看到你输入的账号和密码），安全性差。method:通过文件来处理信息,密码等信息全部会被封装到文件中传输，安全性高。
-
-
-
label标签-
定义：关联标签，遵循PEP8规范每个form标签下的输入，必须关联一个label标签
-
格式：
# 格式一 <label for="usr">用户名：</label> <input id="usr" type="txt" name="usn"> # 格式二 <label>用户名： <input type="txt" name="usn"> </label> -
属性：for后面的内容是关联的标签的id值
-
-
input标签-
分类：
-
文本输入框
txt-
格式：
<input type="txt" name maxlength readonly disabled value> -
属性：
type：类型，输入的是文本内容 name：输入框的名字 maxlength：限定输入文本长度 readonly：文本框只读 disabled：文本框未激活 value：输入框中的默认内容 placeholder：引导文字，当文本框无文字并且未获取鼠标焦点时显示引导文字，当获取焦点或者输入文字时隐藏引导文字。例子： <input type="text" name="username" maxlength="12" readonly="readonly" disabled="disabled" value="用户名">
-
-
密码输入框
password-
格式：
<input type="password" name="pwd">PS：文本输入框的所有属性对密码输入框都有效
-
-
日期输入框
date -
邮箱输入框
email -
单选框
radio-
格式：
<input type="radio" name checked> -
属性：
checked="checked"作用是设置默认选择项
PS：当有多个选项时怎么设置只有其中只有被选中？
只有当name的值设置相同时，才可以实现单选的效果。
-
-
多选框
checkbox-
格式：
<input type="checkbox" name checked> -
checked的作用和单选框相同。
-
-
文件上传
file-
格式：
<input type="file">
-
-
图片上传
image-
格式：
<input type="image" src="图片路径"> # 图片上传可以实现信息提交的功能
-
-
普通按钮
button-
格式：
<input type="button" value="普通按钮">PS:不能提交信息，一般配合js按钮点击事件使用。
-
-
上传按钮
submit-
格式：
<input type="submit" value="提交按钮">
-
-
重置按钮
reset-
格式：
<input type="reset" value="重制按钮">
-
-
-
-
下拉列表
select标签-
select标签内部包含的是option，需要配置value属性，默认选择
select="select" -
属性：
multiple=”multiple”： 将下拉列表设置为多选 selected=”selected”：设置默认选中项目 <optgroup></optgroup> 对下拉列表进行分组。 Label="分组名称" 分组名称。
-
-
多行文本编辑框
textarea标签-
属性：
-
cols：控制输入字符的长度
-
rows：控制输入字符的行数
-
-
-