客户端（这里指一个浏览器）发送一个 http request（比如我想请求一个 index.html 的资源）到服务端，假设服务器端有这个资源，那服务端会给客户端一个 http response（其中响应中包括等等）。
浏览器端显示这个资源页面，需要用到一些前端技术比如 html、CCS、JavaScript 等
结构：由HTML实现，负责管理网页的内容。将来网页上不管是静态还是动态的数据都是填写到HTML的标签里。
表现：由CSS实现，负责管理网页内容的表现形式。比如：颜色、尺寸、位置、层级等等。也就是给数据穿上一身漂亮的衣服。
行为：由JavaScript实现，负责实现网页的动态交互效果。比如：轮播图、表单验证、鼠标滑过显示下拉菜单、鼠标滑过改变背景颜色等等。
HTML 是 Hyper Text Markup Language 的缩写。意思是『超文本标记语言』。
2、超文本HTML 文件本质上是文本文件，而普通的文本文件只能显示字符。但是 HTML 技术则通过 HTML 标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。
3、标记语言说HTML是一种『标记语言』是因为它不是向Java这样的『编程语言』，因为它是由一系列『标签』组成的，是解释型语言，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。
（浏览器是容错的）
html 页面中由一对标签组成：
称之为 开始标签称之为 结束标签，html 前面的 / 表示结束 4.2 head 标签head 标签为一对标签：
head 标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、meta标签等等。
title 标签为对标签，表示网页的标题：
meta 标签是一个单标签，比如用 meta 来设置字符集的规范：
4.3 body 标签body 标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到 body 标签内。
body 标签也是一对标签：
注释的标准格式：
写在一行就是单行注释，写成多行就是多行注释。
4.5 HTML 代码示例<html>
<head>
<title>这是我的第一个网页title>
<meta charset="UTF-8">
head>
<body>
HELLO WORLD!<br/>你好，HTML！
body>
html>
其中：
是一个换行标签，你自己在 html 文件中打多少换行都没用，页面只能识别标签来换行。单标签：开始标签和结束标签是同一个，斜杠放在单词后面。 4.6 HTML 语法规则 根标签有且只能有一个无论是双标签还是单标签都必须正确关闭标签可以嵌套但不能交叉嵌套注释不能嵌套属性必须有值，值必须加引号，单引号或双引号均可标签名不区分大小写但建议使用小写 5、HTML 常用标签
下面列出的是除了上述提到的三个必要的标签之外的其他常用标签：
| 标签名 | 单标签/双标签 | 功能 | 备注 |
|---|---|---|---|
| br | 单 | 换行 | |
| p | 双 | 段落 | |
| a | 双 | 超链接 | 可以设置 href、target 等属性 |
| img | 单 | 图片 | 开始标签中可以设置 src、width、height、alt 等属性 |
| h1~ h6 | 双 | 标题 | |
| ol | 双 | 有序列表 | 开始标签中可以设置 start、type 等属性，列表的一项 |
| ul | 双 | 无序列表 | 可以设置 type 属性 |
| u/b/i | 双 | 下划线/加粗/斜体 | 可以嵌套但不能交叉嵌套 |
| sub/sup | 双 | 下标/上标 | |
| div/span | 双 | 换行块标记/不换行块标记 | 为了方便结合CSS对页面进行布局 |
<html>
<head>
<title>这是我的第一个网页title>
<meta charset="UTF-8">
head>
<body>
HELLO WORLD!<br/>你好，HTML！
<p>这里是一个段落p>
<p>这里是第二个段落p>
<img src="imgs\girl.jpg" width="57" height="73" alt="这里是一张图片"/>
<h1>标题一h1>
<h2>标题一h2>
<h3>标题一h3>
<h4>标题一h4>
<h5>标题一h5>
<h6>标题一h6>
武林高手排行榜:
<ol type="i" start="3">
<li>扫地僧li>
<li>萧远山li>
<li>慕容博li>
<li>虚竹li>
<li>阿紫li>
ol>
武林大会人员名单：
<ul type="circle">
<li>乔峰li>
<li>阿朱li>
<li>马夫人li>
<li>白世镜li>
ul>
你是<b><i><u>喜欢u>i>b>是<b>甜b>月饼还是<i>咸i><u>月饼u>？
<br/>
水分子的化学式： H<sub>2sub>O <br/>
一个圆的方程式： x<sup>2sup>+y<sup>2sup>=1 <br/>
5<10
10>5
5≤10
10≥5
<br/>
注册商标 ®
版权符号 ©
<span>赵又廷span>，夺妻之仇。
<br/>
<a href="http://www.baidu.com" target="_top">百度一下a>
body>
html>
img 图片标签
src 属性表示图片文件的路径width和height表示图片的大小alt表示图片的提示路径的问题：
相对路径：相对于当前 demo01.html 这个文件的目录开始的（示例代码中使用的是相对路径）绝对路径：从盘符开始写的路径（推荐使用）列表标签:
ol 有序列表（ordered list） start 表示从几号开始开始type 显示的类型：A a I i 1(deafult) ul 无序列表（unordered list） type 显示的类型：disc(default) , circle , squarea 表示超链接
href 链接的地址target: _self 在本窗口打开_blank 在一个新窗口打开_parent 在父窗口打开_top 在顶层窗口打开-HTML中的实体（这个用到的时候直接去查百度就可以了）：
小于号 <大于等于号 &ge版权 © 6、HTML 展示表格 6.1 常用标签和属性表格标签 table
行 tr列 td表头列 thtable中有如下属性（虽然已经淘汰，但是最好了解一下）
border：表格边框的粗细width：表格的宽度cellspacing：单元格间距cellpadding：单元格填充tr中有一个属性：
align -> center , left , righttd 的属性，用于合并单元格：
rowspan : 行合并colspan : 列合并 6.2 代码示例<html>
<head>
<title>表格标签的学习title>
<meta charset="UTF-8">
head>
<body>
<table border="1" width="600" cellspacing="0" cellpadding="4">
<tr align="center">
<th>姓名th>
<th>门派th>
<th>成名绝技th>
<th>内功值th>
tr>
<tr align="center">
<td>乔峰td>
<td>丐帮td>
<td>少林长拳td>
<td>5000td>
tr>
<tr align="center">
<td>虚竹td>
<td>灵鹫宫td>
<td>北冥神功td>
<td>15000td>
tr>
<tr align="center">
<td>扫地僧td>
<td>少林寺td>
<td>七十二绝技td>
<td>未知td>
tr>
table>
<hr/>
<table border="1" cellspacing="0" cellpadding="4" width="600">
<tr>
<th>名称th>
<th>单价th>
<th>数量th>
<th>小计th>
<th> *** 作th>
tr>
<tr align="center">
<td>苹果td>
<td rowspan="2">5td>
<td>20td>
<td>100td>
<td><img src="imgs/del.jpg" width="24" height="24"/>td>
tr>
<tr align="center">
<td>菠萝td>
<td>15td>
<td>45td>
<td><img src="imgs/del.jpg" width="24" height="24"/>td>
tr>
<tr align="center">
<td>西瓜td>
<td>6td>
<td>6td>
<td>36td>
<td><img src="imgs/del.jpg" width="24" height="24"/>td>
tr>
<tr align="center">
<td>总计td>
<td colspan="4">181td>
tr>
table>
body>
html>
表单
action 属性表示一个可以正确接收表单数据的地址，这里还没有具体的服务器端环境，即还没和后台交互，所以用一个 html 浏览器来代替；method 属性用来定义提交表单的『请求方式』。method属性只有两个可选值：get或post，没有极特殊情况的话使用post即可。name属性必须要在表单中的每一项进行指定，否则这个文本框的数据将来是不会发送给服务器的
input type=“text” 表示文本框
input type=“password” 表示密码框
input type=“radio” 表示单选按钮。需要注意的是：
name 属性值保持一致，这样才会有互斥的效果，才能显示出单选的效果；可以通过 checked 属性设置默认选中的项，checked=“checked”，当属性名和属性相同的时候，可以省略属性名。input type=“checkbox” 表示复选框
name属性值建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组。select 表示下拉列表
每一个选项是 option，其中 value 属性是发送给服务器的值；selected 属性表示默认选中的项，这里的 selected 由于属性名和属性值相同可以省略属性名。textarea 表示多行文本框（或者称之为文本域）
它的 value 值就是开始结束标签之间的内容；可以设置占用多少行和多少列即 rows 和 cols 属性。input type=“submit” 表示提交按钮
input type=“reset” 表示重置按钮
input type=“button” 表示普通按钮
7.2 代码示例<html>
<head>
<title>表单标签的学习title>
<meta charset="UTF-8">
head>
<body>
<form action="demo04.html" method="post">
昵称：<input type="text" value="请输入你的昵称"/><br/>
密码：<input type="password" name="pwd"/><br/>
性别：<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female" checked/>女<br/>
爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="football" checked/>足球
<input type="checkbox" name="hobby" value="earth" checked/>地球<br/>
星座：<select name="star">
<option value="1">白羊座option>
<option value="2" selected>金牛座option>
<option value="3">双子座option>
<option value="4">天蝎座option>
<option value="5">天秤座option>
select><br/>
备注：<textarea name="remark" rows="4" cols="50">textarea><br/>
<input type="submit" value=" 注 册 "/>
<input type="reset" value="重置"/>
<input type="button" value="这是一个普通按钮"/>
form>
body>
html>
填写一组信息并且点击“注册”按钮之后展示的新页面：
注意：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）