文档章节

HTML

JacksonMike
 JacksonMike
发布于 11/19 10:17
字数 3996
阅读 66
收藏 0

第一节 HTML简介

什么是网页?
网页,是网站中的一个页面,通常是网页是构成网站的基本元素,是承载各种网站应用的平台。通俗的说,网站就是由网页组成的。
通常我们看到的网页都是以htm或html后缀结尾的文件,俗称 HTML文件。

1.1 HTML概述

HTML全称:Hyper Text Markup Language(超文本标记语言)
超文本标记语言是标准通用标记语言(SGML)下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。
HTML是一门用户创建网页文档的标记语言,网页文件本身是一种文本文件,通过在文本文件中添加标记符。
HTML可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示、包括音频、视频等等如何播放)。
简单一句话:HTML是一门用来创建网页的标记语言。

1.2 HTML特点

其主要特点如下:
1 简易性:超文本标记语言版本升级采用超集方式,从而更加灵活方便。
2 可扩展性:超文本标记语言采取子类元素的方式,为系统扩展带来保证。
3 平台无关性:超文本标记语言可以使用在广泛的平台上,这也是万维网(www)盛行的另一个原因。
4 通用性:HTML是网络的通用语言,一种简单、通用的标记语言。

1.3 HTML的发展

超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准)
HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日,W3C推荐标准
HTML 4.0——1997年12月18日,W3C推荐标准
HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
W3C : XHTML1.0 -> XHTML1.1 -> XHTML2.0-->(XML) 死路
WHATWG(2004年成立,由Opera、Mozilla基金会和苹果这些浏览器厂商组成):HTML 5
HTML 5——2014年10月29日,W3C推荐标准

1.4 HTML基本结构

<!--文档声明:告诉浏览器使用HTML5版本 -->
<!DOCTYPE html>
<html>
  <!--网页的头部 -->
  <head>
    <!--设置页面的字符集编码 -->
    <meta charset="utf-8" />
    <!--设置页面的标题 -->
    <title>第一页面</title>
  </head>
   <!--网页的主体 -->
  <body>
    <!--需要展示的信息-->
    页面内容
  </body>
</html>
  • HTML页面包含头部head和主体body
  • HTML标签通常是成对出现的,有开始就有结束,这样的标签称为成对标签、没有结束标签称为空标签。
  • HTML通常都有属性,格式:属性名=“属性值”(多个属性之间空格隔开)
  • HTML标签不区分大小写,建议小写
  • 文件名后缀为.html或.htm

第二节 HTML基本标签

2.1 结构标签

<html><html>:根标签
<head></head>:头标签
<title></title>:页面的标题
<body></body>:主体标签:网页内容
属性:
    color:文本的颜色  <font color="red">内容</font>
    size: 文本的大小   <font size="30">内容</font>
    bgcolor:背景色     <body bgcolor="bisque"> </body>
    background:背景图片	<body background="图片的地址"> </body>
颜色的表示方式:
    第一种方式:使用颜色名称: red green blue skyblue
    第二种方式:RGB模式 #000000  #ffffff  #325687   #377405

2.2 排版标签

1.注释标签:<!--注释-->
2.换行标签:<br/>
3.段落标签:<p>文本文字</p>
特点:段与段之间有行高
属性:align对齐方式(left:左对齐   center:居中  right:右对齐)
4.水平线标签:<hr/>
属性:
width:水平线的长度(两种:第一种:像素表示;第二种,百分比表示)
size: 水平线的粗细 (像素表示,例如:10px)
color:水平线的颜色
align:水平线的对齐方式(left:左对齐   center:居中  right:右对齐)

2.3 标题标签

<h1></h1>--><h6></h6>
随着数字增大文字逐渐变小,字体是加粗的,内置字号,默认占据一行;

2.4 容器标签

<div></div>:块级标签,独占一行,换行
 <span></span>:行级标签,所有内容都在同一行
 作用:<div></div>:主要是结合css页面分块布局
<span></span>:进行友好提示信息

2.5 列表标签

2.5.1 无序列表

ul(unorder list)

无序列表标签: <ul></ul>
属性:type :三个值,分别为
          circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项:<li></li>
示例如下:
<ul type="square">无序列表
     <li>苹果</li>
     <li>香蕉</li>
     <li>橘子</li>
</ul>

2.5.2 有序列表

ol(order list)

有序列表标签:<ol></ol>
属性:type:1、A、a、I、i(数字、字母、罗马数字)
列表项: <li></li>
示例如下:
<ol type="I">有序列表
     <li>苹果</li>
     <li>香蕉</li>
     <li>橘子</li>
</ol>

2.5.3 定义列表

  • dl (defination list) 定义列表
  • dt (defination title) 定义标题
  • dd (defination description) 定义描述
定义列表
<dl>
     <dt>苹果</dt>
           <dd>苹果是一种水果,富含维生素C,美容养颜,吃了长寿....</dd>
</dl>

2.5.4 列表嵌套

<ul>
    <li>咖啡</li>
    <li>茶
        <ul>
            <li>红茶</li>
            <li>绿茶
                <ul>
                    <li>中国茶</li>
                    <li>非洲茶</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>牛奶</li>
</ul>

2.6 图片标签

<img/> 独立标签
属性:
      src:图片地址: 相对路径 (同一个网站)  绝对路径 (不同网站)
      width:宽度
      height:高度
      border:边框
      align:对齐方式,代表图片与相邻的文本的相对位置(有三个属性值:top middle bottom)
      alt:图片的文字说明
      title:图片的悬停显示
      hspace 和 vspace 设定图片边沿上下左右空白,以免文字或其它图片过于贴近

2.7 链接标签

超链接可以是文本,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

  1. 页面跳转
  2. 锚链接

锚点作用

锚点是文档中某行的一个记号, 类似于书签, 用于链接到文档中的某个位置, 当定义了锚点后, 我们可以创建直接跳至该锚点(比如页面中某个小节)的链接, 这样使用者就无需不停地滚动页面来寻找他们需要的信息了

<a>文本或图片</a>
属性:
href:跳转页面的地址(跳转到外网需要添加协议)
target:_self(自己)  _blank(新页面,之前页面存在)  _parent  _top  默认_self
 _search:相等于给页面起一个名字,如果再次打开时,如果页面存在,则不再打开新的页面。可以是任意名字。
name:名称,锚点(回到锚点: 顶部,底部,中间),在访问锚点的书写格式:#name的值

2.8 表格标签

表格由 < table> 标签来定义。每个表格均有若干行(由 < tr> 标签定义),每行被分割为若干单元格(由 < td> 标签定义)。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

2.8.1 普通表格

(table,tr,td)

<!--border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距 width:宽度 height:高度-->
<!--table的 align属性控制表格的对齐方式  left  center right-->
<!--td 的align属性控制内容对齐方式 left  center right -->
<!--td 的valign属性控制内容对齐方式 top  middle bottom -->
<table border="1" bordercolor="red" cellspacing="0" align="center" width="200" height="100">
	<tr>
		<td>学号</td>
		<td>姓名</td>
	</tr>
	<tr>
		<td>1</td>
		<td>aa</td>
	</tr>
</table>

2.8.2 表格的表头

(th)

<table border="1" bordercolor="red" cellspacing="0" align="center">
	<caption>学生表</caption>
	<tr>
		<th>学号</th>
		<th>姓名</th>
	</tr>
	<tr>
		<td>1</td>
		<td>aa</td>
	</tr>
</table>

2.8.3 表格的列合并

colspan 属性

<table border="1" bordercolor="red" cellspacing="0" align="center">
	<tr>
		<td colspan="4" align="center">学生表</td>
	</tr>
	<tr>
		<td>学号</td>
		<td>姓名</td>
		<td colspan="2">各科成绩</td>
	</tr>
	<tr>
		<td>1</td>
		<td>aa</td>
		<td>80</td>
		<td>90</td>
	</tr>
	</table>

2.8.4 表格的行合并

rowspan属性

<table border="1" bordercolor="red" cellspacing="0" align="center">
	<tr>
	<td colspan="4" align="center">学生表</td>
	</tr>
	<tr>
		<td>学号</td>
		<td>姓名</td>
		<td>语文成绩</td>
		<td>数学成绩</td>
	</tr>
	<tr>
		<td rowspan="2">1</td>
		<td rowspan="2">aa</td>
		<td>80</td>
		<td>90</td>
	</tr>
	<tr>
		<td>80</td>
		<td>90</td>
	</tr>
</table>

2.9 文本格式化标签

<b>定义粗体文本。
<big>定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。

第三节 HTML表单标签

HTML表单用于收集不同类型的用户输入

3.1 form标签

常用属性:action:表示动作,值为服务器的地址,把表单的数据提交到该地址上处理
                method:请求方式:get 和post
                enctype:表示是表单提交的类型
                默认值:application/x-www-form-urlencoded  普通表单
                multipart/form-data  多部分表单(一般用于文件上传)
                text/plain 普通文本

	 get:
	   1.数据存在地址栏中,请求参数都在地址后拼接 path?name=张三&password=123456
	   2.不安全
	   3.效率高
	   4.get请求大小有限制,不同浏览器有不同,但是大约是2KB
使用情况:一般情况用于查询删除数据。
	 post:
	   1.地址栏没有数据:请求参数单独处理。
	   2.安全可靠
	   3.效率低
	   4.post请求大小理论上无限。
使用情况:一般用于插入修改等操作
put
delete
header

3.1.1 input标签

type: 以下为type可能要取的值:
      1.1   text 文本框  输入内容
      1.2   password  密码框   密文或者掩码
      1.3   radio 表示是单选,name必须一致;value:提交给服务器的数据
                  表示同一组中只能选中一个( checked ="checked" 表示选中)
      1.4  checkbox  表示多选 ,name必须一致,
                 表示同一组中可以选多个,返回值是个数组( checked ="checked" 表示选中)
      1.5   file :表示上传控件
             以上具有输入性质的必须要有name属性,初始开始写value表示是默认值(以后获取输入框的内容要根据name来取)
             以下按钮不具有输入性质,不需要name属性,但是按钮上的文字提示使用value属性
      1.6 submit   提交
      1.7 reset   重置
      1.9 image   图片提交按钮
      1.10 button 普通按钮
      1.11 hidden  表示隐藏域,该框的内容服务器需要,但是不想让用户知道(不想清楚的显示在界面上)
      1.12 email  表示邮箱格式的数据
name属性:表单元素名字,只有name属性才能提交给服务器。
value属性:提交给服务器的数据
placeholder:提示信息
高级属性:
              disabled:禁用
              readonly:只读

3.1.2 select 元素

(下拉列表)

<select name="city">   <!--select标签添加该属性multiple="multiple"表示多选 、size表示显示的个数-->
<!--option表示下拉列表项-->
     <option value="北京">北京</option>
     <!--selected="selected"表示选中该项-->
    <option value="上海" selected="selected">上海</option>
    <option value="广州">广州</option>
    <option value="杭州">杭州</option>
</select>

3.1.3 textarea元素

(文本域) 需要指定输入的区域位置大小

 <textarea cols="100" rows="5">  表示5行100列的区域可以输入内容,该元素没有value属性

3.1.4 示例及效果图如下


效果图代码如下

<form action="" method="get">
    <table align="center">
        <caption>
            <h1>注册</h1></caption>
        <tr>
            <td align="right">用户名:</td>
            <td><input type="text" name="username" value="bluesky" /></td>
        </tr>
        <tr>
            <td align="right">密码:</td>
            <td><input type="password" name="password" /></td>
        </tr>
        <tr>
            <td align="right">确认密码:</td>
            <td><input type="password" name="confirmpwd" /></td>
        </tr>
        <tr>
            <td align="right">性别:</td>
            <td>
                <input type="radio" name="sex" value="男" />男
                <input type="radio" name="sex" value="女" checked="checked" />女
            </td>
        </tr>
        <tr>
            <td align="right">爱好:</td>
            <td>
                <input type="checkbox" name="hobby" value="篮球" checked="checked" />篮球
                <input type="checkbox" name="hobby" value="足球 " />足球
                <input type="checkbox" name="hobby" value="乒乓球 " />乒乓球
                <input type="checkbox" name="hobby" value="羽毛球 " />羽毛球
            </td>
        </tr>
        </tr>
        <tr>
            <td align="right">上传头像:</td>
            <td>
                <input type="file" name="upload" />
            </td>
        </tr>
        </tr>
        <tr>
            <td align="right">居住地:</td>
            <td>
                <select name="city">
                    <option value="北京">北京</option>
                    <option value="上海" selected="selected">上海</option>
                    <option value="广州">广州</option>
                    <option value="杭州">杭州</option>
                </select>
            </td>
        </tr>
        </tr>
        <tr>
            <td align="right">个人介绍:</td>
            <td>
                 <textarea cols="100" rows="5">
                </textarea>
            </td>
        </tr>
        </tr>
        <tr>
            <td></td>
            <td align="center">
                <input type="submit" value="注册" />
                <input type="reset" value="重置" />
            </td>
        </tr>
    </table>
</form>

第四节 HTML框架标签

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
使用框架的缺点:
    开发人员必须同时跟踪更多的HTML文档
    很难打印整张页面

4.1 frameset

框架结构标签,把body删掉,使用framset代替body

框架结构标签(<frameset>)定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/cols 的值规定了每行或每列占据屏幕的面积

实例1

<!--上下分割  上面20%,下面剩余部分-->
<frameset rows="20%,*">
     <frame name="frame1" src="top.html">
     <frame name="frame2" src="bottom.html" />
</frameset>

实例2

<!--左右分割-->

<frameset cols="20%,*">
       <frame name="frame1" src="left.html" />
       <frame name="frame2" src="right.html" />
</frameset>

4.2 frame

框架标签

frame 标签定义了放置在每个框架中的 HTML 文档。

4.3 基本的注意事项

1. 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用
2. 假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在   <frame> 标签中加入:noresize="noresize"
3. frameset的属性 frameborder="1|0|yes|no" 表示是否有边框  border="1" 表示边框的粗细   bordercolor表示边框颜色

4.4 效果图及源代码示例

源代码示例

top.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body bgcolor="red">
<h1>HTML的框架标签</h1>
</body>
</html>

left.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body bgcolor="#FFA600">
<a href="http://www.baidu.com">官网</a><br/>
<a href="http://www.baidu.com">JAVA官网</a><br/>
<a href="http://www.baidu.com">JAVA在线</a><br/>
</body>
</html>

right.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#00FFFF">
<h1>正文内容</h1>
</body>
</html>

content.html

1.框架标签不能和body同时出现
2.frameset: border去除框架标签的框 ,示例:border="0"
   border="10px" bordercolor="yellow"
3.frame框大小不变:两种情况: 
   第一种:border ="0"
   第二种: noresize="noresize"  不改变大小
   备注:scrolling是否显示滚动条
   yes  显示
   no   不显示
   auto  如果内容高度超过屏幕高度直接显示滚动,
4. frame 是框,内容使用src来填充,
    定位显示到指定位置:  使用name属性
    例如:
           点击left.html的标签跳转内容显示在right.html
                1.给right.html的frame添加name属性,方便定位。
                2.在left.html中使用target目标定位,根据name名查找
<frameset rows="200,*" border="10px" bordercolor="yellow">
	<frame src="top.html" scrolling="yes" noresize="noresize" />
	<frameset cols="200,*">
		<frame src="left.html" scrolling="yes" noresize="noresize" />
		<frame src="right.html" name="content" scrolling="yes" />
	</frameset>
</frameset>

第五节 HTML的其它标签和特殊字符

5.1 其它标签

     <!--该网页的关键字-->
		<meta name="keywords" content="keyword1,keyword2,keyword3">
		<!--该网页的描述-->
		<meta name="description" content="this is my page">
		 <!--该网页的编码-->
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">  html4.01
		 <!--页面自动跳转,2秒后跳转到百度-->
		<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
		 <!--该网页的编码-->
         <meta charset="UTF-8">  html5
        <!-- href:引入css文件的地址-->
		<link rel="stylesheet" type="text/css" href="./styles.css">
		<!--src:js的文件地址-->
		<script type="text/javascript" src=""></script>

5.2 特殊字符

        &lt; 小于号
        &gt; 大于号
        &amp; 与字符
        &quot; 引号
        &reg; 己注册
        &copy; 版权
        &trade; 商标
        &nbsp; 空格

效果图如下:

© 著作权归作者所有

JacksonMike
粉丝 0
博文 35
码字总数 80937
作品 0
武汉
后端工程师
私信 提问
51个css时间轴

51个纯css时间轴 51个纯html和css时间轴(包括横向时间轴和纵向时间轴),只有少部分时间轴有用到javascript。 示例和下载代码都在zip文件中。 纵向时间轴 时间轴截图 时间轴 时间轴: HTML ...

左辅
2017/12/21
0
0
分享HTML 5的参考手册,演讲稿,电子书和教程

今天我们介绍相关HTML5的参考手册,演讲稿,电子书和教程。HTML5是新兴的web技术,虽然不是完全的新技术但是已经有很多的相关文章介绍HTML5,特别是当我们谈论HTML5将成为Flash的替代品。现代...

未来十年
2012/01/07
0
0
网络爬虫引擎--simspider

simspider - 网络爬虫引擎 1.简介 simspider是一个轻巧的跨平台的网络爬虫引擎,它提供了一组C函数接口用于快速构建你自己的网络爬虫应用,同时也提供了一个可执行的爬虫程序用于演示函数接口...

calvinwilliams
2015/02/09
5.4K
1
如何做优化才能提高在百度排名

4shared.com/photo/5NQeORB9/_20131105.html 4shared.com/photo/HXyeRNl-/_20131105.html 4shared.com/photo/jvPoYl-/20131105.html 4shared.com/photo/inYzb-GJ/_20131105.html 4shared.com......

zzhzyy
2013/11/05
44
0
分享3个博客HTML5模板

1.素材类别:半透明 博客html模板 个人博客 半透明html5博客主题,半透明,博客,博客html模板,个人博客,html5,灰色,半透明html5博客主题是一款适合用于个人博客主题,风格很不错. 半透明html5博...

向日葵饼干
2014/05/27
31
1

没有更多内容

加载失败,请刷新页面

加载更多

Kotlin基础语法学习

安装好安卓studio,以及插件支持Kotlin 就可以在创建项目的时候选择 Kotlin语言了。 https://www.jianshu.com/p/4ab13691d681 参考手册: https://www.runoob.com/kotlin/otlin-android-setu...

T型人才追梦者
18分钟前
4
0
java实现简单计算器

1.概述 之前作者写过一篇文章,也是关于计算器的,用的是C++与Qt,链接在这里 这次用java的swing写的(这差距好像有点大,好吧是qt太强了). 先上图: 2.UI 总体布局使用流布局. (1)文本框 文本框就...

Blueeeeeee
20分钟前
4
0
x004-python中循环结构

循环结构 Python中构造循环结构有两种做法,一种是for-in循环,一种是while循环 for in range(101)可以产生一个0到100的整数序列range(1, 100)可以产生一个1到99的整数序列range(1, 100, ...

伟大源于勇敢的开始
24分钟前
5
0
纯CSS实现DIV悬浮(固定位置)

纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。效果如下: 实现代码: <!DOCTYPE html> <html> <head> <meta ...

独钓渔
59分钟前
5
0
OSChina 周二乱弹 —— 给我来个女菩萨

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @这次装个文艺青年吧 :#今日歌曲推荐#分享XXXTENTACION/Travis Barker的单曲《Pain = BESTFRIEND》: 《Pain = BESTFRIEND》- XXXTENTACION/...

小小编辑
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部