本文介绍了HTML的基础，包括开发环境与生产环境的区别，B/S和C/S服务结构，以及URL的工作原理。讲解了静态与动态网站的概念，并详细阐述了HTML的各种标签，如单标签、格式化标签、文本修饰、超链接、图片、表格和表单等。最后提到了DOM点击事件。
文章目录
html基础
开发环境&生产环境
开发环境：
类似于xampp这种简单集成环境软件的运行环境，其特点是体积小，方便不断测试，（xammp：根目录为htdocs）
生产环境：
部署于服务器上面的环境，便于向用户提供服务。（linux 根目录为www，服务器使用的linux）
服务结构：
B/S结构：浏览器-服务器结构
C/S结构：客户端-服务器
-
B/S结构举例：
-
url（同一资源定位符）链接：http://list.jd.com/index.html?uid=10&name=xiaohai&age=24&sex=nv
-
解释：
==http://==为超文本传输协议，端口号80，开放式传输，没有做任何安全加密操作，常见还有 https:// 443端口，http+ssl加密传输，先通过ssl协商加密，再将http传输的内容进行加密。list.jd.com后面的/为list.html
==?==后面 uid=10&name=xiaohai&age=24&sex=nv为参数每个参数由&隔开
-
http：服务为无状态协议，不记录访问信息，每次访问，都需要服务器单独处理，并且下一次访问和上一次访问没有任何关系。
为了使WEB应用有状态引入了（客户端）cookies，（服务器）session等机制。
WEB应用=http（https）+cookies+session+一些辅助应用
-
-
响应代码：
- 200：成功
- 403：拒绝
- 404：未找到
- 500：服务器内部错误
静态&动态网站
静态页面是不能随时改动的，静态是一次性写好放在服务器上进行浏览的，如果想改动，必须在页面上修改，然后再上传服务器覆盖原来的页面，这样才能更新信息，比较麻烦，使用者不能随时修改。
动态页面使用网页脚本语言，比如php、asp、asp.net等，通过脚本将网站内容动态存储到数据库，用户访问网站是通过读取数据库来动态生成网页的方法。并且有前后端之分。
html基本布局
<!-- 这是一个注释 快捷键ctrl + /-->
<!-- 快捷键补全代码：html:5 ,按ctrl + e -->
<!DOCTYPE html> <!-- 这是告诉浏览器用最新的html标准来解析该文档 -->
<html lang="en"> <!-- 说明语言是英文english -->
<head> <!-- 头部，告诉浏览器内容 -->
<meta charset="utf-8"> <!-- 告诉浏览器格式 -->
<title>练习一：基本操作</title> <!-- 标题，浏览器可以看到的 -->
</head>
<body>
<!-- 这是用户可以看到的部分 -->
</body>
</html>
标签
单标签
<h1>这是一级标题</h1> <!--标题标签，空格键只识别一个 -->
<h3>这是<>三级标题</h3> <!-- <表示小于<符号，>表示大于>符号 -->
<h5>这是 五级标题</h5> <!-- 表示空格 -->
<br> <!-- 换行标签 -->
<hr> <!-- 参考线标签 -->
格式化预览标签
<pre> <!-- 怎么敲的就怎么显示 -->
上
左 右
下
</pre>
文本修饰标签
<b>加粗字体</b> <!-- 加粗字体标签 -->
<strong>加粗二</strong>
<i>斜体字体</i> <!-- 斜体标签 -->
<em>斜体二</em>
<u>下划线</u> <!-- 下划线标签 -->
<del>删除字体</del> <!-- 删除标签 -->
<abbr title="我是啊啾">HLY</abbr> <!-- 隐藏文本标签 -->
上标、下标标签
X<sup>2</sup>=64 <!-- sup是上标标签 -->
H<sub>2</sub>O <!-- sub是下标标签 -->
段落标签
<p>第一段</p> <!-- P段落标签 -->
文字方向标签
<bdo dir="rtl">从右到左</bdo> <!-- rtl指right to left显示 -->
<marquee direction="right">欢迎光临</marquee> <!-- 向右滚动标签 -->
列表标签
<ol> <!-- 有序列表标签 -->
<h5>我喜欢的英雄/h5>
<li>狄仁杰</li>
<li>后羿</li>
<li>鲁班</li>
</ol>
<ul> <!-- 无序列表标签 -->
<h5>四大名著</h5>
<li>西游记</li>
<li>水浒传</li>
<li>红楼梦</li>
<li>三国演义</li>
</ul>
<dl> <!-- 定义列表标签 -->
<dt>我喜欢的水果</dt>
<dd>柠檬</dd>
<dd>草莓</dd>
<dd>菠萝</dd>
</dl>
<details> <!-- 详情概要标签 -->
<summary>这些水果口味有</summary>
<p>柠檬水</p>
<p>草莓蛋糕</p>
<p>波罗蜜</p>
</details>
超链接标签
<a href="http://www.baidu.com">有问题找度娘</a>
<a href="./test_2.html">相对路径标签页</a> <!-- 相对路径 -->
<a href="/php_test/html_01/标签.html">绝对路径标签页</a> <!-- 绝对路径 -->
<a href="http://www.baidu.com" target="_blank">新窗口找度娘啊</a> <!-- target属性 -->
<a href="http://www.jd.com" target="_self">原窗口找京东啊</a>
<a href="https://www.tmall.com" title="即将访问天猫">这里是天猫</a> <!-- title属性 -->
锚点标签
<a name="one">这是一个锚点</a> <!-- 锚点开始 -->
<pre>
随便写点
</pre>
<a href="#one">回去</a> <!-- 锚点终点 -->
图片标签
<!--图片标签-->
<img src="./images/a.jpg" width="2px" height="1px" title="这是一只猫妈妈">
<!--图片超链接-->
<a href="http://www.baidu.com" target="_blank">
<img src="./images/c.jpg" width="2px" height="1px" title="访问百度">
<!--图片局部链接，引用map并命名area-->
<img src="./images/g.jpg" width="200px" height="150px" usemap="#map"/>
<map name="map">
<!--图片划分区域,rect为矩形-->
<area shape="rect" coords="0,0,100,150" href="http://www.baidu.com" title="百度">
<area shape="rect" coords="101,0,200,150" href="http://www.jd.com" title="京东">
</map>
多媒体标签
<!-- 音乐标签 audio ,autoplay自动播放，controls控件-->
<audio src="./media/music.mp3" autoplay="autoplay" controls="controls"></audio>
<!-- 视频标签 video -->
<video src="./media/croods-02.mp4" controls="controls" width="4px" height="3px"></video>
<!-- 多媒体通用标签 embed -->
<embed src="./media/music.mp3" width="400px" height="300px"></embed>
表格标签
<!--设置表格，border边粗细，cellspacing指单元格与边界距离，cellpadding指单元格距离文字大小,align是表对齐格式-->
<table border="1" cellspacing="5px" cellpadding="10px" align="center">
<caption>学生信息表</caption> <!--表头-->
<tr align="center"> <!--单元格设置和字体位置-->
<th width="100px">姓名</th> <!--th表示加粗-->
<th width="100px">电话</th>
<th width="100px">学号</th>
</tr>
<tr align="center">
<td width="100px">张杰</td> <!--td表示内容不加粗-->
<td width="100px">110</td>
<td width="100px">520</td>
</tr>
</table>
<!--合并单元格-->
<table border="1" cellspacing="5px" cellpadding="10px" align="center">
<caption>学生信息表</caption>
<tr align="center">
<th width="100px">姓名</th>
<th colspan="2" width="100px">电话</th> <!--colspan横向合并填充，不会被补齐-->
</tr>
<tr align="center">
<td width="100px">星星</td>
<td width="100px">112</td>
<td width="100px">522</td>
</tr>
<tr align="center">
<td width="100px">张杰</td>
<td rowspan="2" width="100px">110</td> <!--rowspan竖向合并填充，不会被补齐-->
<td width="100px">520</td>
</tr>
<tr align="center">
<td width="100px">啊啾</td>
<td width="100px">521</td>
</tr>
</table>
表单标签
<!--提交表单方式有：post、get-->
<form action="./基本布局.php" method="post">
<!--文本框提交类型有：text、password-->
用户名：<input type="text" name="user" value=""/>
密码：<input type="password" name="upass" value=""/>
<!-- 提交按钮 -->
<input type="submit" value="登录"> <!-- 可以将表单内的所选属性提交 -->
<input type="button" value="提交按钮"> <!-- 通过javascript来实现提交动作 -->
<input type="image" width="60px" height="100px" src="./images/f.jpg" title="提交"> <!-- 通过点击图片来实现提交 -->
<!-- 数字输入框，step是变化值间距 -->
<input type="number" step="1" min="0" max="10" />
</form>
<!--单选框，name要一致，value参数-->
性别：男<input type="radio" name="sex" value="1">
女<input type="radio" name="sex" value="0">
<!--复选框，name为数组存储，value参数，check为自动选择属性-->
你喜欢的运动有：
跑步<input type="checkbox" name="sports[]" value="run" />
骑行<input type="checkbox" name="sports[]" value="bike" checked="checked" />
羽毛球<input type="checkbox" name="sports[]" value="playball" />
<!-- 下拉框 -->
你居住的城市在：
<select name="city">
<option value="BJ">北京</option>
<option selected value="NX">宁夏</option> <!-- selected默认选择-->
<option disabled value="GZ">广州</option> <!-- disabled不能选择-->
</select>
<!-- 文本域,文本输入框，大小可变 -->
<textarea name="text"></textarea>
div标签，区域框标签
// onmouseover鼠标移动到元素处标签（事件），onmouseout鼠标脱离元素标签
<div onmouseover="mOver(this)" onmouseout="mOut(this)"; width:300px; height:200px; padding:200px;>苏伏复活了吗</div>
点击事件—DOM
<h3 onclick="this.innerHTML='今天风儿有点喧嚣'">有点尴尬</h3> <!-- 通过点击文字-->
<!-- 通过传入元素到函数，实现修改元素内容-->
<h4 onclick="func(this)" >死狐狸去哪了</h4>
<script type="text/javascript">
function func(id){
id.innerHTML='当然去找萧人鱼吃了'
}
</script>
<!-- 通过鼠标移动，实现修改元素内容-->
<h4 onmouseover="mOver(this)" onmouseout="mOut(this)">苏伏复活了吗</h4>
<script type="text/javascript">
function mOver(obj) {
obj.innerHTML = '想知道就去看第二季吧'
}
function mOut(obj){
obj,innerHTML = "苏伏复活了吗"
}
</script>
扫一扫
458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
