html的学习后的运用方式及构造总结
html复习总结文档
1.基本结构
文件后缀改为(.html) 头部信息<head>（此为双闭合标签）要在结尾处增加</head>
在输入<html>后敲击回车弹出双闭合标签<html></html>格式如下
- <!DOCTYPE html>（声明必须在html文件的第一行，只是声明不是标签）
- <html>
- <head>
- <tilite>网页标题内容</tilite>
- </head>
- <bady>
- <p>(此为段落标签)
- （网页内容显示）在此编辑在网页内显示的内容
- </p>
- <hr/> (此为水平分割线标签)
- </bady> （不同网页有不同的兼容性和表现形式）
- <html>
代码中可以添加不会显示在网页页面上的文字注释
<!--**********-->快捷键位（ctrl+做斜杠）
问题：当王爷出现乱码的时候
解决：在<head>之间添加处理中文乱码标签</head>
<meta charset="utf-8"/>注意：utf-8 gbk gb2112 iso8859-1
<mate http-equiv="Content-Type" content="text/html； charset=utf-8">(此为完整的书写格式)
2.标签
1.标题标签 （<1h></h1>~~<h6><h6>不会在有多的了 多出的网页不显示）
2.段落标签 （<p></p>）
在标签内可以加入 align属性--此为对其方式的属性
- left 标签内的内容左边对齐
- right 右边对齐
- center 居中对齐
- jsutify 对其进行伸展，这样使得每行都会拥有相等的长度
段落标签内可以添加<br/> 可以添加空格键位（ ）
预编辑<pre></pre>把原本编辑的文本内容之间体现在网页上（著译分割开来的文字在哪里断开网页上就在那里断开文字）
段落标签内科增加：
水平分割线 <hr/> 斜体<i></i>/<em></em> 加粗<b></b>/<strong></strong> 下表<sub></sub> 上表<sup></sup>
特殊符号：
- < <
- > >
- ® 已注册
- © © 版权
- ™ TM商标
- space空格
3.列表
1.无序列表ul <li></li>
属性type=“**” disc 圆点默认 square 正方形 circle空心圆
2.有序列表ol
属性type=“**” 1数字 123；a小写字母abc；A大写字母ABC；i小写的罗马数字i ii iii；I大写的罗马数字I II III;
3.定义列表dl
dl > dt(列表项名字)/dd(具体列表内容)
- 定义标签内可以有多个dt
- 对于每一个dt可以有多个dd
1、图像和超链接
图像语法：<img src=”地址” alt=”地址读取失败后著译不会显示图片会显示文字”/>
img属性：
- Src--url--显示图像的地址
- Alt--（文字）图像替代文本
- Height--数值和百分比（图像的高）
- Width--数值和百分比（图像的高）
Img下的src属性--设计到图像的路径问题：
- 绝对路径--指的是具体盘符下的具体路径；
- 相对路径--只的是相当于文件当前的这个图片的路径；
高度和宽度的设置有2种
- px表示的是像素大单位
- %百分比表示的是该图片占父容器的百分比对少（著译随着网页大小变化来改变图片的自身尺寸）
超链接语法：<a href=”地址” >内容</a>
href：链接的地址，可以是内部链接也可以是外部链接
target：链接的目标窗口 _self（原窗口打开网页默认） _blank（从新的页面打开链接） _top _parent
titile：链接提示文字
name：链接名字
电子邮件链接：<a href=”mailto:邮件地址”>....</a>
锚链接语法：<a href="地址">文字内容</a>在同一页面内
1.href 形式如下1：<a href="#所指向的锚头名字">目录文字</a>
2.name 2：<a href=“***” name="所指向的锚头名字">内容</a>
锚链接语法：<a href=”” >内容</a>在不同页面
网页1：<a href=”https://www.baidu.com#锚名”>打开百度</a>
网页2：<a name=”锚名”>.....</a>
文件下载：href属性
- 如果是url地址，那么会打开地址对应的网页
- 如果是文件，就会相应的下载
- 语法：<a href=”下载的文件地址”>点击下载文字提示等等</a>
4.表格
基本格式：
<table>
caption(表格的标题 居中显示)
<thead>(表开头)
tr （行）
th/th（表格头，内容居中显示加粗显示）
/tr
</thead>
<tbody>(表格主题内容）
tr
td/td(表格文体/默认靠左便显示不加粗）
/tr
<tbody>
<tfoot>（脚注）
tr
td/td（td表示的是列）
/tr
</tfoot>
</table>
相关的属性以及设置
weidth px / % 规定的表格宽度设置
alight left center right 表格相对周围原色的对其方式
border px 固定的表格边框宽度
bgcolor rgb（x,x,x,） #xxxxxx colorname 表格 的背景颜色
cellpadding px / % 单元边沿和内容之间的空白距离
cellspacing px / % 单元格子与格子之间的空白距离
fram 属性值 规定外侧边框的那个部分可见的
rules 属性值 规定内测边框的哪个部分可见的
外部边框设置：
1.void 不显示外侧边框
2.above 显示上部的外侧边框
3.below 显示下部的外侧边框
4.hsides 显示上下部分的外侧边框
5.vsides 显示左右部分的外侧边框
6.lhs 显示左侧的外侧边框
7.rhs 显示右侧的外侧边框
8.box 显示有四个边上显示的外侧边框
9.border 在所有四个边上显示外侧边框
内边框设置：
1.none 没有线条
2.groups 位于行组和列祖之间的线条
3.row 位于行之间的线条‘
4.cols 位于列之间的线条
5.all位于行和列之间的线条
tr标签所拥有的属性：
tr标签的所有属性设置如下
align= left center right justify char 行内容的水平对齐方式
valign= top middle botton baseline 行内容的垂直对齐方式
bgvolor= rbg（x,x,x,）#xxxxxx colorname 行内的背景颜色
colorname 著译规定颜色的名称 颜色的英文单词
#xxxxxx/#xxx 16尽职表示方式：#0~f的值
rgb（x,x,x）规定rgb代码的字体颜色 0~255 （拓展：rgba）对于颜色的设置不支持
颜色的三原色：红绿蓝
5.td和th属性设置
align= left center right justify char 行内容的水平对齐方式
valign= top middle botton baseline 行内容的垂直对齐方式
bgvolor= rbg（x,x,x,）#xxxxxx colorname 行内的背景颜色
width px/% 单元格的宽度
height %/px 单元格的高度
//////thead tbody和tfoot拥有的属性设置如下：
align= left center right justify char 行内容的水平对齐方式
valign= top middle botton baseline 行内容的垂直对齐方式
行合并和列合并：
colspan列合并
rowspan行合并