HTML语言

一 、HTML基础

1、HTML5的基本结构与W3C标准

(1)HTML简介及发展史

​ 1、简介:HTML是用来描述网页的一种语言,它是一种超文2本标记语言,也就是说HTML不是一种编程语言,仅仅是一种标记语言。

​ 2、发展史:HTML最初是由HTML2.0版本出现在人们的视野中之后出版了HTML3.2后就开始推荐使用W3C标准。目前最新的版本为HTML5,同时HTML5提供了一些新的元需和一些有趣的新特征,同时也建立了一些新的规则。

(2)HTML5的优势

微软、Gogle、苹果、Oprea、Mozilla等世界前500强公司相继都应HTML做了非常重大的调整与改善。例如苹果公司于2010年发布的Safari5浏览器支持10个以上的HTML新技术,包括HTML5视频、HTML地理位置、HTML5验证等等。

(3)W3C标准

​ 1、W3C标准不是某一个标准,而是一系列的标准集合,一个网页由三部分组成,即结构(Structure),表现(Presentation)和行为(Behavior)。

​ 2、简单来说"结构"表现"行为"分别对应了三种非常常用的技术,即HTML、CSS、javaScript。也就是说HTML用来决定结构和内容,CSS用来设定网页的表现样式,javaScript用来控制网页的行为。

(4)HTML5的基本语法

​ 语法如下:

<html>
<head>
    <title>你输入的头部内容</title>
</head>
<body>
	你输入的内容
</body>
</html>

(5)网页的基本信息

1、DOCTYPE声明:

​ DOCTYPE声明必须位于HTML文档的第一行。

<!DOCTYPE html>

​ 2、title标签

​ 使用标签描述网页的标题,类似一篇文章的标题。

<title>搜狐-中国最大的门户网站</title>

3、标签

​ 使用该标签描述网页的摘要信息,包括文档内容类型,字符编码信息,搜索关键字,网站提供的功能和服务的详细描述等。meta标签描述的内容并不显示,其目的是方便浏览器解析或利于搜索引擎。

2、网页的基本信息

(1)标题标签

标题标签表示一段文字的标题或主题,并且支持多层次的内容结构。
比如一级标题采用<h1>,二级标题则采用<h2>,其他标题以此类推。
HTML一共提供了六级标题<h1>~~<h6>,并赋予了标题一定的外观
,所有字体加粗,<h1>最大<h6>字号最小。

例如:

<html>
<body>
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
</body>
</html>

(2)段落标签和换行标签

1.段落标签:

<p>....</p>

​ 表示一段文字等内容

2.换行标签:

<br/>

​ 表示强制换行显示

例如:

<html>
<body>
<p>
    北京欢迎你,有梦想谁都了不起!<br/>
    有勇气就会有奇迹。<br/>
    北京欢迎你,为你开天辟地。<br/>
</p>
</body>
</html>

(3)水平线与字体样式标签

1.水平线标签:

<hr/>

2.字体样式标签:字体加粗:

<strong>加粗内容</strong>

​ 文字倾斜:

<em>倾斜内容</em>

(4)注释和特殊符号

​ 1.注释:HTML中注释是为了方便代码阅读和调试。当浏览器遇到注释时会自动忽略注释内容

HTML注释的语法是,如下

<!--注释内容-->

2.特殊符号:

特殊符号字符实体示例
空格&nbsp;<a href="#".>百度</a.>&nbsp;
小于号(<)&lt;如果时间&lt;早上7点
引号(")&qult;W3C规范中,HTML的属性值必须用成对的&quot;引起来
大于号(>)&gt;如果时间&gt;晚上6点
版权符号&copy;&copy;20013-2018北大青鸟

(5)图像与超链接标签

1.图像标签

​ 图像标签的基本语法如下:

<img src="图片地址"alt="图像的替代文字"title="鼠标悬停提示文字"width="图片宽度"height="图片高度"/>

注:src属性表示图片路径,alt属性指定的替代文本

2.超链接标签

​ 超链接标签的基本用法如下:

	<a href="链接地址"target="目标窗口位置">链接文本或图像</a>

注:href:表示链接地址的路径

target:指定链接在哪个窗口打开,常用的取值_slef(自身窗口)、_blank(新建窗口)。

二、列表、表格与媒体元素

1、列表

(1)无序列表

无序列表:

<ul>标签和<li>标签组成,使用<ul>标签作为无序列表的声明,使用<li>标签作为每个列表项的起始,</li>标签作为每个列表项的起始。

语法如下:

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

注:W3C标准,<ul>标签里只能嵌套<li>标签,不能嵌套其他标签,<li>标签里面可以嵌套任意标签

无序列表特性如下:

​ (1)

没有顺序,每个<li>标签独占一行(块元素)

​ (2)

默认<li>标签项前面有个实心小圆点

​ (3)一般用于无序类型的列表,如导航,侧边栏新闻,有规律的图片组合模板等

(2)有序列表

有序列表:

<ol>标签和<li>标签组成,使用<ol>标签作为有序列表声明,使用<li>标签作为每个列表项的起始,有序列表嵌套同无序列表一样,**只能<ol>标签里嵌套<li>标签。

语法如下:

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

有序列表的特性如下:

​ (1)

有顺序,每个<li>标签独占一行(块元素)

​ (2)

默认<li>标签项前面有顺序标记

​ (3)一般用于排序类型的列表,如试卷,问卷选项等

(3)定义列表

定义列表:

是一种很特殊的列表形式,它是标题及列表的结合,定义列表的语法相对于无序和有序列表不太一样,它使用<dl>标签作为列表的开始,使用<dt>标签作为每个列表项的起始,而对于每个列表项的定义则使用<dd>标签来完成。

语法如下:

<dl>
    <dt>标题一</dt>
    <dd>第一项</dd>
    <dd>第二项</dd>
    <dt>标题二</dt>
    <dd>第一项</dd>
    <dd>第二项</dd>
</dl>

定义列表特性如下:

​ (1)没有顺序,每个dt标签,dd标签独占一行(块元素)

​ (2)默认没有标记

​ (3)一般用于(一个标题下有多个列表项)*n的情况

2、表格

(1)表格的基本结构:

​ (1)单元格

​ 单元格是表格的最小单位,一个或多个单元格纵横排列组成了表格

​ (2)行

​ 由于表格单元格横向堆叠形成了行

​ (3)列

​ 由于表格单元格的宽度必须一致,因此单元格纵向排列形成了列

(2)表格的基本语法:

<table>
    <tr>
        <th>第一个单元格内容</th>
        <th>第二个单元格内容</th>
        .....
    </tr>
    <tr>
        <td>第一个单元格内容</td>
        <td>第二个单元格内容</td>
        ......
    </tr>
</table>

创建表格一般分为下面四步:

	第一步:创建表格标签<table>...</table>

	第二步:在表格标签<table>...</table>里创建标签<tr>...</tr>,可以有多行

	第三步:在第一行标签<tr>...</tr>里创建单元格标签<th>...</th>,用于创建表格标题

	第四步:在行标签<tr>...</tr>里创建单元格标签<td>...</td>,可以有多个单元格

(3)表格的跨行与跨列

1.表格的跨列

​ 跨列(coslpan)是指单元格的横向合并,语法如下:

<table>
    <tr>
        <td coslpan="所跨的列数">单元格</td>
    </tr>
</table>

2.表格的跨行

跨行(rowspan)是指单元格在垂直方向的合并,语法如下:

<table>
    <tr>
        <td rowspan="所跨的行数">单元格内容</td>
    </tr>
</table>

3、HTML5的媒体元素

(1)视频元素

​ **视频元素:**HTML5中video元素是用来播放视频文件的,支持Ogg(Ogg Vorbis的简写),MPEG4,WebM等视频格式。

语法如下:

<video src="视频路径"controls="controls"></video></video>

(2)音频元素

​ 音频元素:HTML中的audio元素是用来播放音频文件的,支持Ogg,MP3,WSV等音频格式

语法如下:

<video src="音频路径"controls="controls"></video>

(3)HTML5的结构元素

HTML5中的结构元素:

元素名描述
footer标记脚部区域的内容
sectionWeb页面中的一块独立的区域
aside独立的文章内容
nav导航类辅助内容
header标题头部区域的内容

(4)框架

1.<iframe>框架:<iframe>框架的主要作用是使页面中的部分内容用框架实现,一般用于在页面引用站外的页面内容。

iframe的语法如下:

<iframe src="引用页面地址"name="框架标识名"...>
</iframe>

2.<iframe.>属性的使用

​ iframe:内联框架的常用属性包括name,width,heigth,其中name属性可以和前面学过的锚链接结合起来实现页面间的相互跳转。具体步骤如下:

(1)在被打开的框架上加name属性,关键代码如下

<iframe name="mainFrame"src="subframe/the_second.html"/>

(2)在超链接上设置target目标窗口属性为希望显示的框架窗口名,代码如下

<a href="subframe/the_second.html"target="mainFrame">下边显示第二页</a>

三、表单

(1)表单标签及表单属性

	在HTML5中,使用<form>标签来实现表单的创建,该标签用于在网页中创建表单区域,属于容器标签,其他表单标签需要在它的范围内才有效,<input>便是其中的一个,用于设定各种输入资料的方法
属性说明
action此属性指示服务器上处理表单输出的程序,一般来说,当用户单击表单上的"提交"按钮后,信息发送到Web服务器上,由action属性所指定的程序处理。语法为action=“URL”。如果action属性的值为空,则默认表单提交到本页
method此属性告诉浏览器如何将数据发送给服务器,它指向服务器发送数据的方法。语法为metod=(get/post)
<form method="post" action="#">
	<P>名字:<input name="name" type="text"></P>
</form>

(2)表单元素及其格式

1.input元素的常用属性

属性说明
type此属性指定表单元素。可用的类型有text,password,checkbox,radio,submit,reset,file,email,number,url,hidden,image和button。默认为text
name此属性指定表单元素的名称
value此属性是可选属性,它指定单元素的初始值,如果type为radio类型,则必须指定一个值
size此属性指定单元素的初始宽度,如果type为text或password类型,则表单元素的大小以字符为单位,对于其他输出类型,宽度以像素为单位
maxlength此属性用于指定可在text或password元素中输入最大字符数。默认值为无限大
checked此属性用于指定按钮是否被选中的,当输入类型为radio或checbox时,使用此属性

2.文本框

​ 文本框(text):在表单最常用,最常见的表单输入元素就是文本框(text),它用于输入单行文本信息,如用户名的输入文本框。若要在文档的表单里创建一个文本框,将表单元素type属性设为text类型就可以了。

例如:

<form method="post" action="#">
  <p>
    姓氏:
    <input name="lname" value="" type="text"/>
  </p>
</form>

3.密码框

​ **密码框(password):**密码框与文本框类似,区别在于需要设置文本框控件的type属性为password。设置了type属性后,在输入密码时字符都由黑色实心点来显示,从而实现了对数据的处理

​ 例如:

<form method="post" action="#">
 <p>
   密码:
  <input name="pass" type="password" size="21" 		maxlength="10"/>
 </p>
</form>

注:size属性用于指定文本框的长度,maxlength属性用于指定文本框输入的数据长度。

4.单选按钮

单选按钮(radio):简单来说用户一次只能选中一个单选按钮。

例如:

<form method="post" action="#">
   性别:
  <input name="gen" type="radio" value=""/><input name="gen" type="radio" value=""/></form>

5.复选框

​ 复选框(checkbox):复选框与单选按钮有些类似,只不过复选框允许用户选择多个选项。复选框的类型是checkbox,即将表单元素的type属性设为checkbox就可以创建一个复选框了。

例如:

<form method="post" action="#">
   爱好:
  <input name="i" type="checkbox"  				value="sports"/>运动
  <input name="i" type="checkbox" 
    value="talk"/>	聊天
    <input name="i" type="checkbox" 			value="play"/>玩游戏
</form>

6.列表框

列表框:

列表框的目的主要是使用户方便、快速的选择一些选项。它是通过<select>标签和<option>标签来实现。<select>标签用于显示可供用户选择的列表框,每个选项由一个<option>标签表示,**<select>标签必须至少包含一个<option>标签。

例如:

<form method="post" action="#">
  <input name="i" type="text" value="cgt"/><select name="chen">
        <option value="1">一月</option>
        <option value="2">二月</option>
        <option value="3">三月</option>
        <option value="4">四月</option>
    </select>
</form>

7.按钮

​ 按钮:按钮分为三种,分别是普通按钮(button),提交按钮(submit)和重置按钮(reset)。普通按钮主要用来响应onclick事件,提交按钮用来提交表单信息,重置按钮用来清除表单中一填信息。

例如:

<input type="reset" name="cgt" value="重置"/>
<input type="submit" name="cgt" value="提交"/>

8.多行文本框

​ 多行文本框:当需要在网页中输入两行或两行以上的文本时,怎么办?显然,前面学过的文本框框及其他的表单元素都不能满足要求,这就应该使用多行文本框,他的标签是textarea

语法如下:

<textarea name="textarea"cols="显示的数" 
    rows="显示的行数">
	文本内容
</textarea>

9.文件域

​ 文件域:文件域的作用是用于实现文件的选择,在应用时只需要type属性设为file即可。在实际应用中,文件域通常应用于文件上传的操作,如选择需要上传的文本,图片等。

10.网址

​ 网址:url类型的input元素提供用于输入URL地址这类特殊文本的文本框。

例如:

<form method="post" action="#">
  <p>
      请输入你的网址:
      <input type="url" name="cgt"/>
  </p>
   <input type="submit"/> 
</form>

11.邮箱

​ 邮箱:email类型的input元素是一种专门用于输入Email地址的文本框。

例如:

<form method="post" action="#">
  <p>
      请输入你的邮箱:
      <input type="email" name="email"/>
  </p>
   <input type="submit"/> 
</form>

12.数字

​ 数字:number类型的input元素提供用于输入数字的文本框。

<form method="post" action="#">
  <p>
      请输入数字:
      <input type="number" name="num" min="0" 			max="100" step="10"/>
  </p>
   <input type="submit"/> 
</form>

13.滑块

​ 滑块(range):range类型的input元素提供用于输入包含一定范围内的数字值的文本框。在页面中显示为滑动条,我们还可以进行对所接收的数字进行限制,包括规定允许的最大值和最小值,合法的数字间隔或默认条。如果输出的数字不在限定范围之内,则会出现错误提示

例如:

<form method="post" action="#">
  <p>
      请输入数字:
      <input type="range" name="num" min="0" 			max="100" step="10"/>
  </p>
   <input type="submit"/> 
</form>

14.搜索框

​ 搜索框(search):search类型的input元素提供用于输入搜索关键字的文本框。虽然外观看起来search类型和input的普通text类型差不多,但实现起来却并不那么容易。search类型提供的搜索框不只是Google或百度的搜索框,而是任意一个搜索框。

例如:

<form method="post" action="#">
  <p>
      请输入搜索的关键词:
      <input type="search" name="cgt" />
  </p>
   <input type="submit"/> 
</form>
  • 3
    点赞
  • 0
    评论
  • 17
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值