HTML学习

HTML学习

HTML基础

1.HTML：超文本标记语言（全称是：Hypertext Markup Languange)
2.HTML的发展历史：

1993 ietf HTML1.0版本  
1995 W3c(www)万维网  更新HTML2.0 
1996  -  1999          html4.0(基础) 2000  XHTML1.0(xml  html)  
2014至今  HTML5.0

3.HTML的特点：
HTML不需要编译，直接通过浏览器展现
HTML文件是一个文本文件
必须使用HTML /HTM作为文件的后缀名
大小写不敏感，HTML与html一样

4.基本结构分为三部分：头部信息、网页主题部分、整个HTML文件
1、头部信息

2、网页主题部分

3、整个HTML文件

6、添加标签的属性的语法：<标签名 属性名1=”属性值” 属性名2=”属性值”>…</标签名>

7、常用的一些标签
文字和段落
标题标签：

~

段落标签：

align属性 – 对齐方式的属性：
left 左对齐内容
Right 右对齐
Center 居中
Justify 对行进行伸展，这样使得每行都会有相等的长度
换行标签：

预编译：

修饰符标签和特殊符号：
水平线标签：

---

文字斜体：
加粗：
下标：
<sub>上标：
<sup>特殊符号：
< <
> >
® 已注册
© © 版权
™ TM商标
  space空格
font标签 字体标签 – html(h4)不赞成 html5(h5)不支持
注释标签 !–注释的文本-- – 注释的文本在浏览器是不展现的， 做解释说明。
span 文本标签 – label 标签 文本 – 不加任何标签
div 盒子标签 包裹标签 块状标签 – 这个标签可以包容万物
img标签 包裹图片的
img属性：img src=”” alt=””/
src – url – 显示图像的地址
alt – 文字 – 图像替代文本
height – 数值和百分比 – 图像的高
width – 数值和百分比 – 图像的高(px表示像素/用%百分比表示，该图片占父容器的百分之多少)
Img下的src属性 – 设计到图像的路径问题：
绝对路径 – 指的是具体盘符下的具体路径
相对路径 – 指的是相对于当前文件的这个图片的路径
处于同一级目录中
图片处于文件的上一级
图片在img文件的下一级
列表标签
无序列表标签：ul
type属性：
disc 圆点
square 正方形
circle 空心圆
有序列表标签：ol
type属性：
数字 1 2 3。。。。
小写字母 a b …
大写的字母 A B …
小写罗马数字i ii iii
大写的罗马数字I II III
定义列表标签：dl > dt(列表项名字)/dd(具体列表内容)
定义标签内可以有多个dt
对于每一个dt可以有多个dd
超链接 a标签
语法：内容
href:链接地址，可以是内部链接也可以是外部链接
target：链接的目标窗口 – _self _blank _top _parent(_self – 和默认形式一样，都是默认当前打开页面 _blank – 表示点击另开一个页面)
titile:链接提示文字
name:链接命名
锚链接 语法：内容 – 同一个页面内
href:链接地址
name:链接命名
目录1
内容
锚链接 语法：内容 – 不同页面
语法：
网页1：…
网页2：…
超链接扩展功能：
电子邮件链接：…</sup></sub>

HTML表格

table -- 表格
tr -- 行
td -- 单元格 -- 列

基本语法：

带结构表格 – 表格划分三个部分
thead – 表格的头（放表格的表头）
tbody – 表格的主体（放数据的本体）
tfoot – 表格的脚（放表格的脚注）
以上三个标签不会影响我们的表格的布局
table表格的属性：
width px / % 规定表格的宽度
align left center right 表格相对周围元素的对齐方式
border px 规定表格边框的宽度
bgcolor rgb(x,x,x) #xxxxxx colorname 表格的背景颜色
cellpadding px /% 单元边沿和内容之间的空白
cellspacing px /% 单元格之间的空白
frame 属性值 规定外侧边框的哪个部分是可见的
rules 属性值 规定内测边框的哪个部分是可见的

frame外部边框样式
frame
void 不显示外侧边框
above 显示上部外侧边框
below 显示下部的外侧边框
hsides 显示上下部
vsides 显示左右
lhs 显示左边
rhs 显示右边
box 显示所有四个边
border 显示四个边
rules属性值

tr标签的属性设置
align left center right justify char 行内容的水平对齐方式
valign top middle bottom baseline 行内容的垂直对齐方式
bgcolor rgb(x,x,x) #xxxxxx colorname 行的背景颜色

1. colorname 规定颜色的名称 比如;red yellow blue green pink
2. #xxxxxx / #xxx 16进制表示方式：#0~f的值
3. rgb(x,x,x) 规定rgb代码的字体颜色 0~255 （拓展：rgba） – 对于颜色设置不支持
   颜色的三原色：红绿蓝
   颜色代码表
   https://www.sioe.cn/yingyong/yanse-rgb-16/
   td和th属性设置
   align left center right justify char 单元格内容的水平对齐方式
   valign top middle bottom baseline 单元格内容的垂直对齐方式
   bgcolor rgb(x,x,x) #xxxxxx colorname 单元格的背景颜色
   width px % 单元格的宽度
   height % px 单元格的高度

colspan – 列合并
rowspan – 行合并

HTML表单

什表单的作用：是用于收集用户的信息，进行人机交互的操作；
人机交互收集数据之后将其传递给后台，后台处理完再次返回响应到前台的过程
包含元素：文本框、单选、复选、隐藏域、列表框、图片框等统一称为：控件
虚框就是表单——用form标签表示
input标签用于搜集用户信息。 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字 段、复选框、掩码后的文本控件、单选按钮、按钮等等。
在 HTML 中， input标签没有结束标签。
表单控件的常用属性：
name 指定控件的名称，可重复 – 给后台获取数据使用
id 指定标签的唯一识别（类似身份证）
value 输入的控件的值（收集，设置） – 用于传递到后台使用的
checked 复选框（单选）默认被选中的项目
selected 列表框默认被选中的项目
src 图片框的图片来源
onclick 鼠标的单击事件 – JavaScript脚本的事件
disabled 禁用该控件
multiple 允许多选（适用于普通列表框）
action：传递到后台的，收集数据传递到后台进行响应 – 相对路径，绝对路径地址或者文件
method：post 表示隐式的提交，对安全信息保护的比较好
get 表示显示的提交，对信息的保护不是特别好，会将数据显示在url地址上

label：此标签可以放置纯文本，专门用于显示文字使用的，和不加此标签效果一样；
后期可以对此文本进行css样式的设置。
radio的name属性：
name是一样的话会被认为是一组单选框，意味着只能选中一个；
name值不一样，表示他们不是一组，可以同时选中；
checked复选框有三种表达方式：1.checked="checked " 2.checked=“true” 3.checked
button普通按钮会和后面的JavaScript联动使用
submit则是具有提交的功能
reset是重置按钮
image+src 图片跳转按钮
select选择列表标签 option下拉列表项
textarea是多行文本域，rows是限制出现的行数，cols是限制每行出现的字数。用于论坛发帖，长文档的输入
file是上传控件 – 选择文件和后台脚本联动上传。
隐藏域 – 虽然是隐藏的，但是主要作为前台不方便被其他人看到，但是需要传递到后台的数据
普通列表框和下拉列表框代码完全一致
multiple允许多选,适用于普通列表框 multiple也有三种表达方式：1.multiple=“multiplt” 2.multiple=“true” 3.multiple
分组下拉菜单 – optgroup