Html重点知识

这两天写Jsp页面的时候，发现一些Html的知识想不起来，于是把重点部分复习了一下。下面的笔记来源于网上一些资料或者经典视频，整理成博客，方便以后参考，也给初学者一些帮助。

Html简介及特点
Html（HyperText Markup Language）：超文本标记语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。标记语言是一套标记标签 (markup tag)。它不是一种编程语言，而是一种标记语言。
主要特点如下：
（1）简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
（2）可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
（3）平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
（4）通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
Html的操作思想
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来，通过修改标签的属性值来实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。
Html构成
html包含两部分内容：
（1）<head>设置相关信息</head>
（2）<body>显示在页面上的内容都写在body里面</body>
一些特殊字符
小于号< ：< (可记为 less than缩写)
大于号>：> (可记为 greater than缩写)
空格： 
&：&
双引号”："
注册符号®：®
版权符号©：©
Html文字列表的使用

（1）定义列表（dl标签）
        <dl><dt></dt><dd></dd></dl>
        eg：
        <dl></dl>：表示列表的范围
        在dl里面，<dt></dt>：上层内容
        在dl里面，<dd></dd>：下层内容
（2）有序列表（ol标签）
        <ol type="1"><li></li></ol>
        属性type：设置排序方式 1（默认值，缺省时也是1），a，i
        <ol></ol>：有序列表的范围。
        在ol标签里面，<li>具体内容</li>
（3）无序列表（ul标签）
        <ul type="circlr"><li></li></ul>
        <ul></ul>表示无序列表的范围。
        type：空心圆circlr，实心圆disc，实心方块square，默认disc

6.图像标签

<img src="图片的路径">

src：图片的路径
width：图片的宽度
height：图片的高度
alt：图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容。或者图片加载失败时，显示的文字。注意：有些浏览器下不显示，没有效果

7.超链接标签
（1）链接资源

<a href="链接到资源的路径">显示在页面上的内容</a>

href：链接的资源的地址
target：设置打开的方式，默认是在当前页打开。
    _blank：在一个新窗口打开
    _self：在当前页面打开，默认值
<a href="">超链接内容</a>，href里面不写任何内容，打开当前文件所在的路径。
当超链接不需要到任何的地址，在href里面加#，eg：<a href="#">超链接内容</a>

（2）定位资源
eg：回到顶部功能
如果想要定位资源，定义一个位置

<a name="top">顶部</a>

回到这个位置

<a href="#top">回到顶部</a>

8.表格标签
（1）作用：可以对数据进行格式化，使数据显示更加清晰。

（2）相关标签

<table></table>：表示表格的范围
    在table里面，<tr></tr>表示行
    在tr里面，<td></td> 单元格填数据
    使用th也可以表示单元格，可以实现居中和加粗。

（3）步骤：
首先定义一个表格范围，使用table。
再定义一行使用tr
在每行里面有单元格，使用td。

（4）表格的标题 caption标签

<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">
    <caption>这是表格的标题</caption>
</table>

border：表格线
bordercolor：表格线的颜色
cellspacing：单元格之间的距离
width：表格的宽度
height：表格的高度

（5）设置表格中文本的位置，居左、居中、居右
eg：
<tr align="center"></tr>
align：设置显示方式，left、 center、 right

（6）合并单元格
rowspan：跨行
colspan：跨列
eg：

    <td rowspan="3"></td>
    <td colspan="3"></td>

9.表单标签

<form></form>：定义一个表单的范围

常用属性
action：提交到某个地址，不写则默认提交到当前页面。
method：表单提交方式，常用的有两种 get和post，默认是get请求。
get和post的区别：
1）.get请求地址栏会携带提交的数据，post不会携带（post请求，请求参数在请求体里面）。
2）.get请求安全级别较低，post较高
3）.get请求数据有大小限制，post没有限制
enctype：一般请求不需要设置这个属性，在文件上传时需要设置这个属性。

输入项：可以输入内容或者选择内容的部分，大部分的输入项使用 <input type="输入项的内容"/>，在输入项里面需要有一个name属性，这样提交表单的时候就可以取到输入的值。

（1）普通输入项：<input type="text" name="phone"/>

（2）密码输入项：<input type="password" name="pwd"/>

（3）单选输入项：<input type="radio"/>
在里面需要属性name
name的属性值必须要相同，这样才能在两者中只选中一个（表示在一个组里面）
必须有一个value值。
实现默认选中的属性 checked=”checked”

（4）复选输入框：<input type="checkbox"/>
在里面需要属性name。
name的属性值必须要相同。
必须有一个value值。
实现默认选中的属性 checked=”checked”

（5）文件输入项：<input type="file"/>

（6）下拉输入项（不是在input标签里面的）

<select name="birth">
    <option value="1991" selected="selected">1991</option>
    <option value="1992">1992</option>
    <option value="1993">1993</option>
</select>

默认选择 selected=”selected”。

（7）文本域：

<textarea cols="10" rows="8" name="tex"></textarea>

（8）隐藏项（不会显示在页面上，但是存在于html代码里面）：

<input type="hidden" name="hid"/>

（9）提交按钮：<input type="submit" value="注册"/>

（10）使用图片按钮提交：<input type="image" src="图片路径"/>

（11）重置按钮（不是全部清空，而是回到输入项初始默认状态）：

<input type="reset" value="xxx"/>

（12）普通按钮，和js一起使用

<input type="button" value="xxx"/>

10.Html中其它常用标签
b：加粗
s：删除线
u：下划线
i：斜体
pre：原样输出
sup：上标。eg：4²⁰⁰
代码 4<sup>200</sup>
sub：下标。eg：3₁₀₀
代码 3<sub>100</sub>
p：段落标签，比br标签多一个换行
hr：下划线
div：自动换行
span：在一行显示

11.Html头标签
（1）在head里面的标签就是头标签。
（2）title标签：表示在标签上显示的内容。
（3）<meta>标签：设置页面的一些相关内容

设置关键字
<meta name="keywords" content="刘翔，熊出没"/>  
3秒之后，自动跳转到http://baidu.com
<meta http-equiv="refresh" content="3;url=http://baidu.com"/>

（4）base标签，设置超链接的基本设置，可以统一设置超链接的打开方式。
点击页面内所有的超链接打开新的页面

<base target="_blank"/>

12.框架标签

<frameset>属性值：

rows：按照行进行划分 <frameset rows="80,*">
cols：按照列进行划分 <frameset cols="80,*">

具体显示的页面<frame>，定义 frameset 中的一个特定的窗口（框架）。eg：

<frame name="lower_left" src="b.html">

使用框架标签的时候，不能写在body里面，使用了框架标签，需要把body去掉。

<frameset rows="100,*"> //把页面分成上下两部分
        <frame name="top" src="a.html"> //上面页面
    <frameset cols="150,*">     //把下面部分划分成左右两部分
        <frame name="left" src="b.html">    //左边的页面
        <frame name="right" src="c.html">   //右边的页面
    </frameset>
</frameset>

如果在左边页面的超链接，点击之后想让内容显示在右边的页面中，设置超链接里面target属性值，设置成右边frame对应name的值。eg：

<a href="01-hellow.html" target="right">这是超链接</a>

最后，我要吐槽一句，CSDN的垃圾编辑器真的好难用！
去它X的

posted on 2018-07-22 23:21 lishbo 阅读(638) 评论(0) 编辑收藏举报