HTML小结

最新推荐文章于 2022-09-15 13:00:00 发布

Only同学

最新推荐文章于 2022-09-15 13:00:00 发布

阅读量643

点赞数

分类专栏： Html5 文章标签： html

本文链接：https://blog.csdn.net/sinat_33091263/article/details/51933512

版权

Html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这两天又系统的学习了一遍html标签，发现自己还是有很多遗漏的知识点没有掌握，很多细节问题没有把握好，所以写这篇博文来对我所学的知识点做一个小结

HTML全称hypertext markup language，叫做超文本标记语言，这里“超文本”的意思是“超越文本”，指的页面内可以包含图片、链接、音乐、程序等非文本元素；
html属于解释执行的文本语言，作为Internet编写网页的主要语言，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（例如：文字如何处理，画面如何安排，图片如何显示等等），浏览器按照顺序阅读网页文件，然后根据标签解释和显示其中的内容，对书写错误标记不会指出错误，并且不会停止解析过程，我们只能通过显示效果来分析出错的原因和出错的位置，所以它的容错性很强。

下面我们来讲讲html的基本语法

我们可以使用.html和.htm作为html文件的后缀名；
文档结构

文档类型声明:版本和文档类型声明，版本和文档类型声明是对应的，文档类型使用DTD来指定XML
1）严格的文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2）宽松的文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3）frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
4）H5文档类型
<!DOCTYPE html>

3.标签
html的标签可以分为两大类：
1）块级标签：特点是独占一行，可以设置width，height，margin，padding，
常见的块级元素有

div (div是最纯粹的块级标签上下没有间距)
h1~h6（标题）
p（段落）
ul 、ol、（无序列表和有序列表）、li
dl(自定义列表)、dt（自定义列表的标题）、dd（自定义列表的内容，有文本缩进）

2）行内标签：特点是不会独占一行，设置width和height对其无效，其次，对行内元素设置水平方向的内外边距是有效的，但是设置垂直方向的内外边距无效
- span（span标签是最纯粹的行内标签）
- a（超链接）
(文本修饰标签)
- u（下划线）
- i（斜体）
- em(斜体)
- b(加粗)
- strong(加粗)
- s（下划线）
- sup(上标)
- sub（下标）
(表单类)
-input
-select(下拉列表)
-textarea（文本框）
特殊的：
- img标签虽然归为行内元素但是它又自带width 和height 属性所以我们把它称为特殊的一个标签一般使用的时候习惯先display：inline-block；

除此之外，我们根据元素的本身特点讲，可以分为可替换元素和不可替换元素
可替换元素：替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示的内容。html中的 img、input、textarea、select、object 都是可替换元素，这些元素往往没有实际的内容，即使一个空元素。

不可替换元素： html中的大多数元素都是不可替换元素，即内容直接表现给浏览器

接下来我们讲讲html中一些功能强大的标签，a标签远不止只是从一个页面链接到另一个页面的功能，还有很多其它比较强大的功能
首先，a标签

<a href="" target="" title="">显示</a>

a标签的href属性
(1).绝对路径（例如http://www.baidu.com）和相对路径（例如b.html）；
(2). 邮件地址：mailto:1422893029@qq.com ;
(3). 锚点： #mao（锚点可以让用户在文档中设置标记，这些标记通常放在文档的特定主题处或顶部，然后创建到这些锚点的连接，指向网页中的特点位置。当给a标签设置锚点时可以是name也可以设置id）；

<!--举例-->
<h2 id="section1">1,什么是万维网</h2>
<p>万维网，是基于Internet的信息服务系统，官方定义为"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",简而言之，WWW是一个以Internet为基础的计算机网络，它允许用户在一台计算机上通过Internet访问另一台计算机上的信...</p>
<a href="#section1">查看第一部分内容</a>

(4). 定义空链接：javascript:void(0);

a标签的target属性:定义连接的目标窗口
_blank (在新的窗口打开)
_self(在当前窗口打开)
_parent
_top
target属性使用较多的是在框架中，当我们想把链接打开在某个框架中而不是整个浏览器窗口的时候，我们可以给想要链接到的框架设置name属性

下面的例子我们把frameset分为了上下分别为20%，和80%，然后又把下部分分成了左边20%和右边80%,（注：这里为了说明target属性只写出两个页面，其它页面没有注明)，当点击左边页面的HTML CSS Photoshop 其src指定的链接页面将会显示在frame_content.html中

<!--frame.html-->
<frameset rows="20%,80%">
    <frame src="frame_top.html" noresize="noresize" scrolling="no">
    <frameset cols="20%,80%">
        <frame src="frame_left.html">
        <frame src="frame_content.html" name="content" scrolling="auto">
    </frameset>
</frameset>

<!--frame_left页面-->
<body>
    <h3>第一阶段</h3>
    <ul>
        <li><a href="left_html.html" target="content">HTML</a></li>
        <li><a href="left_css.html" target="content">CSS</a></li>
        <li><a href="left_ps.html" target="content">PhotoShop</a></li>
    </ul>
</body>

另外，说到a标签，当我们给它的伪类设置样式的时候需要注意代码的顺序；在CSS的定义中a:hover 必须置于a:link 和a:visited 之后； a:active必须位于a:hover之后才是有效的。

a:link{color:orange;}        /* 未访问的链接的样式*/
a:visited{color:green;}      /*已访问的链接的样式*/
a:hover{color:grey;}         /* 鼠标移到链接上的样式*/
a:active{color:yellow}      /*鼠标点击链接的样式*/

img标签

<img src="图片的源地址" title="对图片的说明" alt="当图片找不到时显示的文本信息" width="" height="" border="" align="图片和文字的对齐方式" hspace="水平间距" vspace="垂直间距">

我们除了常用img标签来导入图片之外，还有值得一提的是用它来创建热点area 借助dreamweaver 我们可以在一副图片的某几个部位建立链接；例如我们可以利用dw的热点工具，把中国地图上的每个省份勾勒出来，dw会自动帮我们获取相应的坐标，当点击某个省份的时候链接到指定的页面出现相应的介绍信息。这一功能在某些时候是及其有用的。

框架文档
frameset虽然是一种已经过时的布局方式，但我们还是需要了解一二

一个框架文档由四部分组成，文档声明，html元素，head元素，frameset元素，所以在使用框架文档的时候，我们需要把其文档声明换位其特有的，并且要注意的是框架文档是没有body体的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

1）frameset 框架集
rows
用来定义将框架水平分隔为子框架的数量和这些子框架的宽度
cols
用来定义将框架垂直分隔为子框架的数量和这些子框架的高度。


<frameset rows="10%,90%">
    <frame src="">
        <frameset cols="15%,85%">
            <frame src="">
            <frame src="">
        </frameset>
</frameset>
<noframes>
该浏览器不支持frameset框架
</noframes>

2）frame 框架窗口
属性
src: 设置框架的初始内容
frameborder:框架窗口边框线
marginwidth: 在框架的边缘和边框的内容之间可以出现的空白（左右边）
marginheight: 在框架的边缘和边框的内容之间可以出现的空白（上下边）
srolling: 框架视图的滚动条设置
auto 必要时提供，默认值
yes 始终提供滚动条
no 不提供滚动条
noresize: 改变框架窗口大小
name: 框架名称，作为该框架的标识
target: 框架目标
_blank
_parent
_self
_top
框架名
3）iframe 内联框架
iframe允许用户在一个文本中插入一个框架，iframe元素可以使用frame元素的所有属性，实现功能也相同。

    <body>
        <iframe src="" frameborder="0"></iframe>
    </body>

表单
表单主要用于收集来自用户的信息，并将收集到信息发送给服务器端处理程序处理，表单时客户端和服务器端传递数据的桥梁。
1）form 表单容器
action属性用来设定处理表单URI的地址；
method 用来设定数据传输到服务器端的方式，分为get和post； get 将输入的数据追加到action地址后面； post 将输入的数据保存到HTTP协议报文中。
name设定表单的名称；
enctype 设置表单数据的内容类型；

<form action="" method="" name="" enctype="">

</form>

1）. input
input的属性(使用input的时候我们必须指定name值)
type
text 单行文本框
password 密码框
checkbox 复选框
radio 单选按钮
submit 提交按钮（可以提交）
reset 重置按钮
file 文件
hidden 隐藏域
image 图像按钮（可以提交）
button 普通按钮（不可以提交）
name
控件名称，这个名称将与控件的当前值形参”名称/值”对一同随表单提交
value
用于设定初始化，可选。
checked
单选框，复选框默认选中属性
size
当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text,password，这时宽度是整数值，表示字符的数目
maxlength
指定可以输入的字符的最大值。适用于控件类型为text,password。

2）select 下拉列表

<select name="" id="">
    <option value=""></option>
    <option value=""></option>
</select>

属性
name: 控件名称
size: 列表框中行的显示数量
multiple: 是否允许多选
如果select元素不包含属性size和属性multiple时，表单类型显示为菜单（组合框）
如果使用了属性size和属性multiple中的任意一个，则表单类型显示为列表框
selected: 默认选中
option 下拉列表选项
属性：
value: 定义控件的初始值。提交表单时，初始值会被提交给服务器。
optgroup 分组选项

    <select name="" id="">
                <optgroup label="大洋">
                    <option value="">太平洋</option>
                    <option value="">大西洋</option>
                    <option value="">印度洋</option>
                </optgroup>
                <optgroup label="大海">
                    <option value="">东海</option>
                    <option value="">南海</option>
                    <option value="">渤海</option>
                </optgroup>
            </select>

3）textarea 多行文本框
属性
name: 控件名称
rows: 定义文本框行数
cols: 定义文本框列数
warp: 是否自动换行。
off 不自动换行
hard自动硬回车换行，换行元素一同被传送到服务器中
soft自动软回车换行，换行元素不会传到服务器中
4）label 为表单控件定义标签
一些表单控件内建有标签，当内建有标签时，一般使用value属性的值作为标签，而另外一些表单控件没有标签，则直接使用文本作为标签来说明控件的意义。每个label元素都要和表单控件关联到一起

    <table>
                <tr>
                    <td><label for="username">用户名：</label></td>
                    <td><input type="text" id="username" name="username"></td>
                </tr>
                <tr>
                    <td><label for="passwold">密码：</label></td>
                    <td><input type="password" id="password" name="password"></td>
                </tr>
</table>

Only同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML小结

这两天又系统的跟着老师学习了一遍html标签，发现自己还是有很多遗漏的知识点没有掌握，很多细节问题没有把握好，所以写这边博文来总对我所学习的内容做一个小结html全称hypertext markup language
复制链接

扫一扫

专栏目录