HTML
初识HTML
什么是HTML
Hyper Text Markup Language(超文本标记语言)
HTML发展史
HTML5的优势
-
世界知名浏览器厂商对HTML5的支持
如:微软,Google,苹果,Opera,Mozilla等
-
市场的需求
-
跨平台
W3C标准
W3C
- World Wide Web Consortium(万维网联盟)
- 成立于1994年,Web技术领域最权威和最具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
- W3C标准包括:
- 结构化标准语言(HTML,XML)
- 表现标准语言(CSS)
- 行为标准(DOM,ECMAScript)
常见IDE
- 记事本
- Dreamweaver
- IDEA
- WebStorm
- …
HTML注释:HTML注释只有一种,格式为 ,以"<!–“开头,以”–>"结尾
快捷键:Ctrl+/
网页基本信息
-
DOCTYPE声明
告诉浏览器我们要使用什么规范,如<!DOCTYPE html >表示使用html
-
<title>标签
title标签为网页标题
-
<meta>标签
meta标签是描述性标签,用来描述网站的一些信息
一般用来做SEO
<!--声明规范-->
<!DOCTYPE html>
<!--表明语言,"ch"中文,"en"英文-->
<html lang="ch">
<!--<head>...</head>部分为网页头部-->
<head>
<meta charset="UTF-8">
<title>这里是网页标题</title>
</head>
<!--<body>...</body>为网页主体部分-->
<body>
<!-- 所有的网页主体内容都写在这里-->
这里是网页的主体内容
</body>
</html>
<!--如<head>...</head>,<body>...</body>等成对出现的标签分别叫开放标签和闭合标签
除此之外还有另一种非成对的标签,如:<hr/>等-->
以上代码形成的网页界面如下:
网页基本标签
<!--声明规范-->
<!DOCTYPE html>
<!--表明语言,"ch"中文,"en"英文-->
<html lang="ch">
<!--<head>...</head>部分为网页头部-->
<head>
<meta charset="UTF-8">
<title>这里是网页标题</title>
</head>
<!--<body>...</body>为网页主体部分-->
<!--bgcolor设置背景颜色-->
<body bgcolor="aqua">
<!-- 所有的网页主体内容都写在这里-->
<h1>这里是一级标题</h1>
<h3>这里是三级标题</h3>
<h6>这里是六级标题</h6>
<p align="left">这里是网页的主体内容1</p>
<p align="center">这里是网页的主体内容2</p>
<p align="right">这里是网页的主体内容3</p>
<!--注意在body里面的内容,不需要其他标签包裹也能在网页中显示出来,一般还是包裹起来较好-->
<hr/>
12 34
<p>12 34 </p>
<!--<br>为换行标签-->
<p>1这里测试换行这里测试换行1</p>
2这里测试换行这里测试换行2
3这里测试换行<br>这里测试换行3
<p>4这里测试换行<br>这里测试换行4</p>
<p><strong>这里测试字体样式,粗体</strong></p>
<p><em>这里测试字体样式,斜体</em></p>
<h2>特殊符号</h2>
空格: 一般情况下在源码内连续多个空 格,在网页内只会显示一个空格,若要显示多个空格,需要用特殊符号&+nbsp;如:空 格
<br/>换行 >大于号<小于号©版权符号
</body>
</html>
以上代码形成的网页界面如下:
图像,超链接,网页布局
图像标签
-
常见的图像格式;
JPG,GIF,PNG,BMP等
-
图像标签:
<img src="path" alt="text1"title="text2"width="x"height="y"/>其中 src为图像地址(路径),alt为图像的替代文字(在没有找到图片或者图片未加载的时候显示的文字),title为鼠标悬停在图片上时显示的文字,width和height分别表示图片的宽和高
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>图像标签</title> </head> <body> <!--写路径的时候可以采用绝对路径或者相对路径,一般推荐根据项目安排写相对路径,..表示当前文件的上一级目录--> <img src="../resources/image/001.png"alt="1234"title="这是一张图"> <!--也可以使用网络路径--> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"alt="1234"title="这也是一张图"> </body> </html>
以上代码形成的网页界面如下:
超链接标签
<a href="path" target="目标窗口位置">链接文本或图像</a>
- 文本超链接
- 图片超链接
锚链接(书签)(需要要跳转的位置设置标记),功能性链接
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--文本超链接-->
<a href="http://www.baidu.com"target="_blank" name="标记1">点击我跳转到百度</a><br><br><br><br>
<!--图片超链接-->
<a href="http://www.baidu.com"target="_parent">
<img src="../resources/image/001.png" alt="点击我跳转到百度">
</a><br><br><br>
<!--
锚链接(书签):在第一个文本超链接里添加了一个name属性,把name属性里的值填入href里点击文本就可以跳转到name属性所在的位置
以name属性做的标记,在填入href时要在前面加#符号
-->
<a href="#标记1">回到name标记处</a><br><br><br>
<a href="mailto:2628234026@qq.com">点此转到邮箱</a>
</body>
</html>
以上代码形成的网页界面如下:
行内元素和块元素
- 块元素
- 无论内容多少,该元素独占一行
- (p,h1-h6)
- 行内元素
- 内容撑开宽度,左右都是行内元素的可以排在一行
- (a,strong,em)
列表,表格,媒体元素
列表
-
什么是列表
列表就是信息资源的一种展示形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息
-
列表的分类
- 无序列表
- 有序列表
- 定义列表
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表,有序列表里的每一项前会自动编号
ol包裹表示有序列表,ol里每一对li包裹一项内容-->
<ol>
<li>第一点</li>
<li>第二点</li>
<li>第三点</li>
<li>第四点</li>
</ol>
<ol>
<li>第五点</li>
</ol>
<hr>
<!--无序列表,无序列表的每一项前会有一个黑点标记
ul包裹表示有序列表,ol里每一对li包裹一项内容-->
<ul>
<li>第一点</li>
<li>第二点</li>
<li>第三点</li>
<li>第四点</li>
</ul>
<ul>
<li>第五点</li>
</ul>
<hr>
<!--
自定义列表,使用此列表时,dt包裹的列表标题与dd包裹的列表项之间会自动缩进,每一个dt下可以跟多个dd
dl包裹表示自定义列表,里面的dt表示此列表的标题,dd表示列表项,dd与有序和无序列表里的li类似-->
<dl>
<dt>列表标题一</dt>
<dd>第一点</dd>
<dd>第二点</dd>
<dd>第三点</dd>
<dd>第四点</dd>
<dt>列表标题二</dt>
<dd>第一点</dd>
<dd>第二点</dd>
<dd>第三点</dd>
<dd>第四点</dd>
</dl>
</body>
</html>
以上代码形成的网页界面如下:
表格
- 为什么使用表格
- 简单通用
- 结构稳定
- 基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--表格table
行 tr,在没有跨行的情况下,一对tr里包裹的所有内容都在同一行
列 td,在没有跨列的情况下,每个tr对里包裹的每一对td里包裹的内容就是一个基本格的内容
border 边框宽度
-->
<table border="1px">
<tr>
<!--colspan:跨列,align:对齐方式,靠左靠右居中等-->
<td colspan="4" align="center">1</td>
</tr>
<tr>
<!--rowspan:跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
</html>
以上代码形成的网页界面如下:
媒体元素
视频元素
video
音频元素
audio
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src:资源路径,路径填写方法与图片路径相同
controls:控制条
autoplay:自动播放-->
<!--视频-->
<video src="路径"controls autoplay></video>
<!--音频-->
<audio src="路径"controls autoplay></audio>
</body>
</html>
页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标记头部区域的内容(用于整个页面或页面中的一块区域) |
| footer | 标记脚部区域的内容(用于整个页面或页面中的一块区域) |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用(常用于侧边栏) |
| nav | 导航类辅助内容 |
iframe内联框架
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body align="center">
<!--iframe内联框架
src:地址
w-h:宽度高度-->
<br><br>
<iframe src="https://www.w3.org/" name="biaoji1" frameborder="0"width="90%"height="400px"></iframe>
<br><br>
<!--在target里填写标记名,可在标记处打开指定路径-->
<p align="center"><a href="https://www.google.cn/"target="biaoji1">打开谷歌主页</a>
<a href="https://www.baidu.com/"target="biaoji1">回到百度主页</a></p>
</body>
</html>
以上代码形成的网页界面如下:
表单及表单应用
表单元素格式
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型,text,password,checkbox,radio,submit,reset,file,hidden,image,button,默认为text |
| name | 指定表单元素的名称 |
| value | 元素的初始值,type为radio时必须指定的一个值 |
| size | 指定表单元素的初始宽度,当type为text或password时,表单元素的大小以字符为单位,对于其他类型,宽度以像素为单位 |
| maxlength | type为text或者password时,输入的最大字符数 |
| checked | type为radio或者checkbox时,指定按钮是否是被选中 |
表单的应用
- 隐藏域 hidden
- 只读 readonly
- 禁用 disabled
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body align="center">
<!--表单form
action:表单提交的位置,可以是网站也可以是一个请求处理地址
method:post或者get两种提交方式
比较:get方式提交时,我们可以在URL中看到我们提交的信息,不安全,但是高效
post:比较安全,可以用来传输大文件
-->
<form action="提交地址"method="get">
<!--input:输入,type属性为text时,获取普通文本输入,为password时,获取密码输入,type还有一些别的属性值,分别代表一些别的作用框
size:文本框获取的文本长度-->
<p>名字: <input type="text" name="username"size="20"></p>
<p>密码: <input type="password"name="pwd"></p>
<!--单选框,type值为radio时,为单选框
value:单选框的返回值,即选择后实际提交的内容
name:表示组,name值相同的单选框表示为同一组单选框,在同一组单选框里只能选择一个选项
-->
<p>性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框,type = "checkbox"
value:单选框的返回值,即选择后实际提交的内容
name:表示组,name值相同的多选框表示为同一组多选框,在同一组多选框里可以选择多个选项
-->
<p>爱好:
<input type="checkbox"value="sleep"name="hobby">睡觉
<input type="checkbox"value="code"name="hobby">敲代码
<input type="checkbox"value="chat"name="hobby">聊天
<input type="checkbox"value="eat"name="hobby">吃东西
<input type="checkbox"value="game"name="hobby">玩游戏
</p>
<!--下拉框:select
option:子选项
带有selected的选项为默认选项-->
<p>下拉框:
<select name="列表名称">
<option value="A" selected>语文</option>
<option value="B">数学</option>
<option value="C">英语</option>
<option value="D">物理</option>
<option value="E">化学</option>
<option value="F">生物</option>
</select>
</p>
<!--文本域:textarea
cols-rows:列-行
placeholder:文本域里的提示信息,当在文本域内输入内容后,自动消失-->
<p>反馈:
<textarea name="textarea" cols="30" rows="10"placeholder="请输入你的反馈"></textarea>
</p>
<!--文件域-->
<P>
<input type="file"name="files">
</P>
<!--type属性值为button时,为普通按钮,为image时,为图片(把目的路径的图片作为按钮)
type属性值为submit时,为提交按钮,为reset时,为重置按钮
点击重置按钮后在同一表单,即同一组form内填写的所有内容全部清空-->
<p>按钮:
<input type="button" name="but1" value="点击位置"><br>
<!--<input type="image" src="../resources/image/001.png"><br>-->
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
以上代码形成的网页界面如下:
表单初级验证
常用方式:
- placeholder 提示信息
- requied 非空判断
- pattern 正则表达式
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
