文章目录
1 初识HTML
1.1 什么是HTML
-
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
-
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如 和
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
-
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
-
查看chrome查看源码：
Ctrl + Shift + i -
HTML5基本框架
<!-- 包装的框子 --> <html> <!-- 头部内容 --> <head> <!-- 告诉Browser(浏览器)我叫什么名字 --> <title>helloWorld</title> </head> <!-- 身体内容 --> <body> Hello！ World === 你好！世界 </body> </html> -
W3C标准（万维网联盟）
- 结构化标准语言（HTML, XML）
- 表现标准语言（CSS）
- 行为标准（DOM, ECMAScript）
2 网页基本标签
2.1 HTML 标题
HTML 标题（Heading）是通过
-
等标签进行定义的。
实例
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
2.2 HTML 段落
HTML 段落是通过
标签进行定义的。
实例
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
2.3 HTML 链接
HTML 链接是通过 标签进行定义的。
实例
<a href="http://www.w3school.com.cn">This is a link</a>
2.4 HTML 图像
HTML 图像是通过 标签进行定义的。
实例
<img src="w3school.jpg" width="104" height="142" />
<!--DOCTYPE：告诉浏览器，要使用的规范-->
<!DOCTYPE html>
<!--html lang="en"：总标签-->
<html lang="en">
<!--网页头部-->
<head>
<!-- 使用name作为标记-->
<a href="#top">顶部</a>
<!-- 描述性标签，描述网站的标签，一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" contene="狂神说java">
<meta name="description" contene="java">
<!-- 网页标题-->
<title>好气气的网页</title>
</head>
<!--主体部分-->
<body>
Hello！ World === 你好！世界
<!-- 标题标签-->
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<!-- 段落标签-->
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<!--
超链接标签：
href：链接路径，
target：链接在那个窗口打开，
常用值由_self,_blank
-->
<a href="http://www.w3school.com.cn">This is a link</a>
<br/>
<!--
图片标签：
src:图像地址，
alt：图像的替代文字，
title：鼠标悬停提示文字，
width：图像宽度，
height：图像高度
-->
<img src="w3school.jpg" alt="假装此处有图片" title="看到了吗" width="104" height="142" />
<br/>
<!-- 水平线标签-->
<hr/>
<!-- 换行标签-->
阿斯弗啊发生噶<br/>
阿斯弗啊发生噶<br/>
阿斯弗啊发生噶<br/>
粗体：<strong>粗体</strong>
<br/>
斜体：<em>斜体</em>
<br/>
<!-- 特殊符号 -->
空格：空 格
<br/>
大于号：>
<br/>
小于号：<
<br/>
版权：©版权所有
<!--
特殊符号记忆方式
&+字母;
查百度
-->
<!-- 标题标签-->
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3><!-- 标题标签-->
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3><!-- 标题标签-->
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3><!-- 标题标签-->
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3><!-- 标题标签-->
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3><!-- 标题标签-->
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3><!-- 标题标签-->
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3><!-- 标题标签-->
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3><!-- 标题标签-->
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3><!-- 标题标签-->
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<!--
锚链接
1. 需要一个锚标记
2. 跳转到标记
-->
<a href="#top">回到顶部</a>
<!-- 功能性链接-->
<a href="https://www.baidu.com">点击开始学习</a>
</body>
</html>
-
块元素
- 无论内容多少，该元素独占一行
- （p，h1-h6）
-
行内元素
- 内容撑开宽度，左右都是行内元素的可以在排成一行
- （a，strong，em）
3 列表，表格，媒体元素
3.1 3种列表：有序列表、无序列表和定义列表
有序列表：ol, li
无序列表：ul, li
定义列表：dl, dt, dd
| 标签 | 描述 |
|---|---|
| ol | 定义有序列表 |
| ul | 定义无序列表 |
| li | 定义列表项 |
| dl | 定义列表 |
| dt | 自定义列表项目 |
| dd | 定义自定列表项的描述 |
定义列表
dl即“definition list（定义列表）
dt即“definition term（列表中每一项的项目名）
而dd即“definition description（列表中每一项的具体描述）”。
在该语法中，dl标记定义了定义列表的开始和结束，dt后面添加要解释的名词，而在dd后面则添加该名词的具体解释。dt后面跟着一个或多个dd，他们成对使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>汽车品牌</h2>
<!--有序列表-->
<ol>
<li>奥迪</li>
<li>奔驰</li>
<li>大众</li>
<li>宝马</li>
</ol>
<!--无序列表-->
<ul>
<li>奥迪</li>
<li>奔驰</li>
<li>大众</li>
<li>宝马</li>
</ul>
<!--定义列表-->
<dl>
<dt>创办时间：</dt>
<dd>1952</dd>
<dt>类别：</dt>
<dd>公立大学</dd>
</dl>
</body>
</html>
3.2 表格table
- 在
css技术出现之前，网页通常使用表格布局。 - 由于表格的
渲染速度过慢，嵌套太深，布局较为复杂，所以在出现css之后网页布局一般都不用表格了。 - 但是
后台还在使用，因为后台是面向管理员的，对界面要求不高，对功能性要求高
| 标签 | 描述 |
|---|---|
| table | 整个表格 |
| caption | 表格标题 |
| thead | 表头 |
| tbody | 表格主体 |
| tfoot | 表尾 |
| tr | 表格行 |
| th | 表头单元格（或称标题单元格） |
| td | 普通单元格 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--列合并-->
<table border='2' width='600' cellpadding='5' cellspacing='2'>
<tr>
<td colspan='3' align='middle'>1.1</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>
</html>
3.3 媒体元素
其实主要的就是提供了两个标签给我们使用 使用起来非常容易
- video
- audio
| 标签 | 描述 |
|---|---|
| autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。 |
| loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | 如果出现该属性，则音频输出为静音。 |
| auto | |
| none | 规定当网页加载时，音频是否默认被加载以及如何被加载。 |
| src URL | 规定音频文件的 URL。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
</body>
</html>
4. 页面结构
4.1 页面结构分析
| 标签 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚步区域的内容（用于整个页面或页面中的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文字内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header><h2>网页头部</h2></header>
<section><h2>网页主体</h2></section>
<footer><h2>网页脚部</h2></footer>
</body>
</html>
4.2 iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe src="https://www.baidu.com" frameborder="0" framespacing="0" allowfullscreen="true" width="1280" height="1440"></iframe>
<a href="1. 第一个网页.html"target="_blank">点击跳转</a>
<!--<!–src:引用页面地址, name：框架标识名–>-->
<!--<iframe src="//player.bilibili.com/player.html?aid=800199518&bvid=BV1Ny4y1z7hN&cid=252048676&page=1"-->
<!-- scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->
</body>
</html>
5 *表单及表单应用
5.1 form表单标记
表单标记以标记开头，以标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。
form标签两个最重要的属性：action 和 method
input的type类型有很多，这里有text和password两种
button的type类型默认为submit，另外还有button, reset类型
标记的基本语法如下：
<form action="url" method="get | post" name="formName" onsubmit="" target="">
</form>
GET 和 POST的区别：
-
GET就是从服务器获取到东西，POST是向服务器发送东西
-
GET不会造成对服务器数据上的改动，是一种比较安全的操作，没次GET操作返回的结果都是一样的
-
POST每次提交到服务器理论上来说对服务器的内容是有修改的，每次提交都是不一样的
-
在缓存上二者会有差异：GET端可能是从浏览器这一端，包括代理服务器，或者是中间的运营商，在各个环节对于GET请求来说可能是缓存的；但是浏览器不会去缓存任何POST请求。
-
数据传输的方式有区别：GET把要发送的字段通过http的url一次性地发送给服务器；POST会对要发送的字段编码，放到http的body里面提交过去，而http里面head和body里面的内容是分两次发送过去的
比如说用户名是aaa密码是bbb那么用GET就是在url后面加?然后用&(and)连接在一起发送给服务器
5.2 表单元素格式
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型。text, password, checkedbox, radio, submit, reset, file, hidden, image, button。默认text |
| name | 指定表单元素的名称 |
| value | 元素的初始值。type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。其它类型以像素为单位 |
| maxlength | text\password类型的最大字符数 |
| checked | redio\checked类型指定按钮是否被选中 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册登陆</title>
</head>
<body>
<h1>注册</h1>
<!--表单：form
action：表单提交的位置，可以是网站，也可以是一个请求
method：post，get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，但是快
post方式提交：比较安全，可以传输大文件
-->
<form action="1. 第一个网页.html" method="post">
<!--文本输入框：<input type="text">-->
<p>名字：<input type="text" name = "username" value="haoqiqi" maxlength="16" size="30"></p>
<p>密码：<input type="password" name="pwd"></p>
<!--单选框-->
<p>性别：
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<!--多选框-->
<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="game" name="hobby">打游戏
</p>
<!--按钮
button 普通按钮
image 图片按钮
submit 提交按钮
reset 重置按钮
-->
<p>
<input type="button" name="btn1" value="不要点">
<input type="image" src="aaa.jpg">
</p>
<!--下拉框-->
<p>
<select name="列表名称" id="">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
</p>
<!--文本域-->
<p>
<textarea name="textarea" id="1" cols="30" rows="10"></textarea>
</p>
<!--文件域-->
<p>
<input type="file" name="files" value="选择文件1">
<input type="button" name="load" value="上传">
</p>
<!--邮件验证-->
<p>
<input type="email" name="email">
</p>
<!--邮件验证-->
<p>
<input type="url" name="url">
</p>
<!--数字验证-->
<p>
<input type="number" name="num"max="10" min="1">
</p>
<!--滑块-->
<p>
<input type="range" name="滑块" max="100" min="0">
</p>
<!--搜索框-->
<p>
<input type="search" name="搜索">
</p>
<!--增强鼠标可用性-->
<p>
<label for="mark">点下试试</label>
<input type="text" id="mark">
</p>
<!--提交与重置-->
<p>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</p>
</form>
</body>
</html>
其它属性：
- readonly：只读
- disable：禁用
- hidden：隐藏
6 *表单初级验证
常用方式：
- placeholder 提示信息
- required 非空判断
- patten 正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册</h1>
<!--表单：form
action：表单提交的位置，可以是网站，也可以是一个请求
method：post，get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，但是快
post方式提交：比较安全，可以传输大文件
-->
<form action="1. 第一个网页.html" method="post">
<!--文本输入框：<input type="text">-->
<p>名字：<input type="text" name = "username" placeholder="请输入名字"></p>
<p>密码：<input type="password" name="pwd"></p>
<!--单选框-->
<p>性别：
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<!-- 自定义邮箱-->
<p>
<input type="email" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
</body>
</html>
扫一扫
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
