html回顾 | 易学教程

1.w3c标准html(1-4),别的标准xhtml,两者不兼容，html5兼容这两者

2.html一般以<!doctype html> 开头来指明文档规范

3.head标签内常用元素：

<base>:指明资源默认路径
<meta>:包含一些浏览器需要处理的信息：其中最重要的http-equiv属性
比如：可以指定处理编码，以及重定向
<meta http-equiv="content-type" content="text/html;charset=gbk">
<meta http-equiv="refresh" content="3;http://www.baidu.com">

4.块状标签和行级标签，主要是是否自动换行

5.块状标签：p/h(1-6)/br/hr/div/ol/ul/bl

p：一段
h(1-6)：用以区分标题
br：换行
hr：分割线
div：分区标签
ol:有序号的列表
ul：无序号的列表
bl：描述标签

6.行级标签：

<b> 定义粗体文本；<strong> 定义粗体
<i> 定义斜体文本；<em> 定义强调文本和斜体差不多
<small> 定义小号文本
<sub>  定义下标文本  比如，元素  水：H<sub>2</sub>O
<sup> 定义上标文本 比如 ，次方：2<sup>2</sup>
<bdo> 通过dir属性是否对文本进行反转，ltr(从左到右)或rtl(从右到左）<bdo dir="rtl">right to left</bdo>

6.1超链接标签：

<a href="链接地址" target="目标窗口">链接文本或者图片</a>
target:以什么窗口显示内容，_self,_blank,_top,_parent,分别是使用自身，新窗口，顶层框架，父框架，
注意：在框架中显示并不是使用_top,_parent而是设置成那个框架的框架名字

6.2图像标签：

<img src ="图片地址" alt="提示文本"> 未找到图片会显示提示文本

6.3文本等级：

<span>将内容放大</span>

7.特殊符号：

空格     &nbsp;
大于（>） &gt;
小于（<） &lt:
引号（“） &quot
版权号    &copy

8.框架集frameset，让一个页面显示多个网页，每个网页用<frame>标签放到<frameset>中

（框架集不能放在<body>标签中，body只能表示一个页面，两者不能同时存在）

（html5不支持，但是在标注了html5的网页中浏览器还是可以运行框架集是因为浏览器的兼容性）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<frameset rows="30%,*">
    <frame src="1.html" name="topFrame" />
    <frameset cols="20%,*">
        <frame name="leftFrame" src="2.html" noresize="noresize">//固定大小不可移动
        <frame name="rightFrame" src="">
    </frameset>
    <noframes>
        <body>此浏览器不支持该框架，一般还是支持的
        </body>
    </noframes>
    </frameset>
</html>

属性：

name:框架的名字用于链接跳转指明在哪个框架中显示
src:当前框架显示的页面
rows：水平分割，将框架分为上下部分。
      像素值写法：rows="200,*"
      相对值写法：rows="30%,*"
      将框架分成很多行，（rows="30%,20%,*"）
cols：垂直分割，将框架分为左右部分。类似上面

设置跳转方式：框架的名字就是用到这表示网页显示位置的位置

<a href="3.html" target="rightFrame">我是左边框架的链接</a>

9.内嵌框架<iframe>可以在网页内插入框架，html5只收录的内嵌框架

<body>
<iframe src="初始显示的网页" name="框架的名字" frameborder="边框的粗细大小" scorlling='' yes/no/auto:可滚动，不滚动，超出大小有滚动条"
width="100%" height="444px" /> 
<p><a href="www.baidu.com" targer="框架的名字">我要跳转的页面显示在框架中</a></p>
</body>

10.表格标签：显示需要全部加载完以及大量嵌套，可读性维护性比较差，所以一般多使用div+css替代。

cellspacing：单元格间的距离
cellpodding：单元格内部和内容的距离。
alighn：居左，还是居右，居中显示。
rowspan：跨行显示，（感觉一列比较长）
colspan：跨列显示，（显示上觉得一行比较宽）

<table widthi="50%" height=""200px" border="1" cellspacing="1px" cellpodding="0px" alighn="center">
<caption>我喜欢的歌曲</caption>
<thead><tr><th>歌名</th><th>作者</th></tr></thead>
<tbody>
<tr><td>光辉岁月</td><td>beyongd</td></tr>
<tr><td>倩女幽魂</td><td rowspan="2">张国荣</td></tr>
<tr><td>有谁共鸣</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2" align="right">总共有n首歌</td></tr>
</tfoot>
</thead>

11.表单：用于提交数据给服务端

//name 和 id 属性的区别：//id前端区分唯一性，js使用；//name后端使用，提交数据后通过name获取值，必须存在
<form method="post" action="http://localhost:80/index.html">
name:<input type="text" name="uname" id="uname"/>
pass:<input type="password" name="pwd" id="pwd"/>
<input type="submit" value="login"/>
</form>

常用属性：

method:传输数据的方式：

get：数据会显现在地址栏中URL之后，并且有最大2k的限制；
post：数据会封装在html的head里面，大小限制后端决定。

enctype:用于指定表单数据的编码方式：

application/x-www-form-url encoded:默认的编码方式。将表单数据处理成URL编码的方式。
mutipart/form-data：以二进制方式处理表单数据一般用于文件上传。
text/plain:当表单的action的属性为mailtoURL的形式时使用。一般用于邮件发送

12.输入标签：根据type的值:

text:文本框   
password：密码框   
hidden：隐藏域
radio;单选
checkbox:多选   
img：图像
file:文件
submit/reset/button:按钮

属性：

size： 文本框的显示长度（size);
maxlength：文本框的最大字符数(maxlength)checked：单选/多选处于选中状态属性（checked)disabled：禁止使用readyonly:文本框只读

13.button按钮比input按钮强大之处在于，按钮可以显示成图片，有格式文本

14.label标签，点击标签，焦点移动到目标位置（for--->id)：

<label for="u"> 用户名：</label><input id ='u' size="10" type="text"/>

15.列表框和下拉列表框：

15.1列表框属性：

    <select size="1" multiple="multiple" disabled="disabled">
        <option disabled value="1">1</option>
        <option selected="selected" value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>

size:显示效果，列表框和下拉列表框的区别是size是否大于1
multiple：是否可多选，需要按住CTRL进行多选，值必须是multiple,或者不写，效果一样
disabled：禁用此列表框，值必须是disabled,或者不写，效果一样

15.2子元素属性

15.2.1列表项option属性：

value:选中的值，用来判断选择了哪项
selected：默认是否被选中，值必须是selected,或者不写，效果一样
disabled：禁用此列表框，值必须是disabled,或者不写，效果一样

15.2.2列表项组optionGroup的属性：

<select size="5" >
    <optgroup label="一本">
        <option disabled value="1">1</option>
        <option selected="selected" value="2">2</option>
        <option value="3">3</option>
        </optgroup>
        <optgroup label="二本" disabled="disabled">
        <option value="4">4</option>
        <option value="5" >5</option>
        </optgroup>
    </select>

size:显示上，选项组的名称也算一项，但，是不可选的
label:选项组的名称
disabled：禁用此选择组/选项，值必须是disabled,或者不写，效果一样

16.多行文本框：

    <textarea rows="11" cols="6" readonly="readonly">
1.我是一行文本aaaaaaaaaaaa
2。我是第二行啊啊啊啊啊啊
    </textarea>

显示效果自动换行的条件：1.源码中换行；2.长度不够显示自动换行

属性：

rows="11" cols="6" readonly="readonly"

17.多媒体标签：视频，音频，动画：提供<embed> <object>标签的支持

由于多媒体支持的规范的不统一，兼容问题，html5提供更加强大的支持：<autio> <vidio>标签的支持（略）

来源：https://www.cnblogs.com/straybirds/p/7029328.html

标签

框架网页

框架