HTML入门

一、常用标签

1、字体标签

font 字体标签目前已经不使用了，但是以前老的网站仍存在使用的情况，维护时需要知道

font用来描述字体
size=数值 表示字体的大小，范围1-7（超过7不在变化）
face=“字体样式” 表示字体样式设置
color=“颜色” 表示字体颜色的设置
eg： size=3 face=“楷体” color="#000000"> 我是字体

2、段落标签和注释

< p > 和 < br >的区别：
< br >标签用于换行使用，但是不换段落
< p >是用于换段落
两者的使用是不同的，千万不可以混淆。如果需要更换段落，就是用< p >
如果是换行，则需要使用

不能混乱。
注释< !–…-- >
增加可读性

3、HTML中常用的转义字符

&nbsp 不断行空格
&ensp 半方的空格
&emsp 全方大的空格
&1t 小于
&gt 大于
&amp &符号
&quot 双引号“
&copy 版权符号©️
&reg 已注册商标®️

4、标题标签

标题标签
<h?>…</h?>

h1 → h6，权重h1最大，h6最小
通常使用 h1 h2 h3
h1 大标题 ×1
h2 副标题 ×1
h3 栏目标题…
seo 关键词优化，百度爬虫抓取 → h1标签，比较重要
h1 靠近body好 h1不能过多

<h1>标题1的标签虽然在语法上可以写入多个，但是会被百度等搜索引擎认定为违规的操作，非但不能够起到作用，反而会被搜索引擎列入黑名单，所以千万不要写多个标签</h1>

-------------------------阶段小结---------------------------
开发工具：Sublime3（也可以用其他开发工具）

字体标签<font>（已在HTML5中废弃）用来规定字体颜色，大小，写法<font size="n" face="黑体" color="red"></font>，当n>7时按n=7处理。属性color也可以以16进制或RGB表示
段落标签<p></p>浏览器会在段落之间加一个空行
换行标签<br></br>
注释标签<!--注释内容-->便于程序的修改，及提高其可读性
标题标签<h?></h?>其中?=1~6,1~3较为常用，1用作大标题，2用作副标题，3用作栏目标题，尽量靠近<bodu>标签，便于搜索引擎的搜索    

5、img标签

图片标签

<img src="XX" alt="xx" />

属性 src alt width height
alt 提示信息(图片不存在/不能正常显示时，出现)
src = “XX路径”【相对路径/绝对路径】

src=“…/image/head…”，前面的“…”的意思是返回上一级路径，这里是相对路径（和Linux中的命令“cd …”返回上一个文件夹类似）
绝对路径是从盘符开始，src=“d:/image/a.jpg”，
**一般使用相对路径比较多

注意：
1）当图片资源的路径文件夹,与当前的html文件同级时，直接使用，上一级文件 …/
2.）src的值也可以是网络上的图片

5、超链接

超级链接标签

<a>......</a>

链接，图片都可以打开

超链接

<a href=""></a>

打开外网 需要加上 http：//www.xxx.com
a标签的target属性 _blank,_parent,_self,_top
target属性
_blank ：在新打开、未命名的窗口打开链接，
_parent :在父窗口打开链接
_self :当前窗口打开
_top: 目标将会清除所有被包含的frame框架
解释一下：blank有空白的意思，也就是在新的空白页面打开的意思

超链接便签是<a>，可能和address，地址这个单词有关吧。
例子：<a href="https://www.imooc.com">慕课网</a>，href后面加上需要转向的地址，两个便签<a>之间是显示在页面上的提示内容，当然可以是文字，图片，使用图片时，需要使用img标签载入图片，<img src="image/logo.png">
比如：<a href="https://www.baidu.com" target="_blank">
<img src="image/logo.png">
</a>

注意：target后面的字符有好几种，可以有不同的打开页面方式
_blank 在新打开、未命名的窗口打开链接，
_parent 在父窗口打开链接
_self 当前窗口打开
_top 目标将会清除所有被包含的frame框架
解释一下：blank有空白的意思，也就是在新的空白页面打开的意思
self有自己的意思，也就是在自己当前的页面打开新链接
行级元素：默认情况下有两个三个都在同一行显示除非行满了换行；
块级元素：这一行里面不管是一个还是十个字，也不管这一行满没满，他都是独占一行的

6、锚点

<a name="名称">
<a href="名称">锚点1</a>  点击锚点1可以到达<a name="名称">的位置。
<a href="01.html#duanluo"> 则可以到达某一个网址内的锚点位置     

7、利用id属性实现锚点

创建锚点
<a id="num-1">
使用锚点
<a href="#num-1">

重点总结：
  同一个网页内部不同位置的锚点实现，无论是使用name属性，还是id属性在链接href中都必须加上#；

8、列表

无序列表：<ul><li>列表项</li></ul>
有序列表：<ol><li>列表项</li></ol>

li*5，按tab，生成5个<li></li>

uI 无序
oI 有序
li 条目内容（列表项）

列表项内容：段落、换行符、图片、链接、其他列表

二、表格

1、html表格

①
表格标签: table tr td border width
table 用于描述表格的开始和结尾
tr 行开始和结尾
td 单元格开始和结尾
border 用来描述是否显示表格的边框
width 表格的宽度或者单元的宽度
增加边框 是写在table里面的 width用来增加宽度
width 有两种形式 像素和百分比
表格的需求设计时 应该注意列就行 后期的单元格会由数据库进行操作

②

在当前 <td> 中 <td colspan = "2">合并2列
<td rowspan= "2">合并2行

--------------------注意-----------------------
合并后，记得删去原有被合并的单元格（这里主意删除的是被合并的部分)，
否则排版会发生错乱

列的合并相对简单，在一个行里面去找就行了
行的合并先去找行，再去找列

合并行列 colspan 、rowspan
作用 用于将表格内的某些行、列进行合并
找位置的基本规则：先数行，再数列
合并多行多列
table 的行和列的合并：
列合并：colspan- 横向合并
行合并：rowspan- 纵向合并

③

属性	属性值	作用
border	1	设置边框
width	npx,n%	表格宽度
bgcolor	颜色值	表格背景
align	left,center,right	表格在文档中的对齐方式

bgcolor（表格背景颜色）的三种书写方法：
在table标签里面添加属性ngcolor:

1. bgcolor = “red” //可以直接用颜色的英文单词
2. bgcolor = “#ff0000” //16进制颜色码 #00（前两位红色）00（绿色）00（蓝色）,0~f 取值范围 按照 红绿蓝 排序[两个两个表示三原色的基本元素]，值越大颜色越深。例如：bgcolor = “ff00aa”,表示红色的颜色最深为ff，表示绿色的颜色最浅为00，表示蓝色的颜色为aa.
3. RGB表达方式已经被属性bgcolor淘汰,可以用下面属性写：
   style = “background-color:rgb(254,45,54)”

三、表单

1、html表单

表单
<form action="aaa" method="post">
（这里面放许多控件，如<input>）
</form> 
action: 把表单所有内容传递给aaa这个文件
method :get 显式提交 post 隐式提交

标签<label>...</label>
文本框 <input type="text" name="" id="">
密码框<input type="password" name="" id="">
id前端使用，唯一
name后端使用，可重复
单选按钮 <input type="radio" name="" id="">
单选按钮中name定义名称一致为一组
cheaked="cheaked"默认选中   

action
method 传入后台的方式 post隐式提交 get显示提交
输入框标签 <input >
type 类型、name可以重复、ID是唯一的
text 文本框
1、文本框中的内容可以使用placeholder属性完成，如下所示，username就是显示的内容
<input type="text name="user" id="" placeholder="username">

password 密码输入框//与text区别在于看不看的见输入文字
radio 单选框 //两个单选框，name属性同名，即表示只可显示一个
checkbox复选框（在input中不添加value属性，后台将得不到选择的是什么属性，再向后台传递value值得时候尽量的使用数字）
select标签标示选择框，option标签表示选项（option中加selected="selected"表示默认选中），value属性表示选项值
button普通按钮 （value表示按钮上显示的名称）
submit提交按钮 （value表示按钮上显示的名称）进入后台action标记的位置继续处理  

<form action="（传递给后台程序员）" method="（传入方式）">
<input type=‘ text’（password，radio，checkbox ） name=“可重复” id=“不可重复 ”>
<select>
<option  value selected(默认被选中)></option>
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
特殊列表
1、多行文本框：<textarea rows="5" cols="30">请输入</textarea>
（rows规定了长度，cols规定了宽度）
2、选择文件按钮：<input type="file">
3、隐藏域：<input type="hidden" name="" id="">
4、下拉列表框变为普通列表框：<select size="4">
允许多选：<select size="4" multiple="true">
</select>