2.1 html
html简图
1.html基本结构
<!DOCTYPE html>
<!-- 通知浏览器解析html的版本 使用html5版本解析 -->
<!-- html格式不严格 建议以标准语法格式编写
html 基本标签
head 进行网页相关描述
meta 元数据标签 charset="utf-8"
title 网页标题
body 网页主体内容
1.标签规则
1.双标签（闭合标签） 开始 标签体 结束 <html> 可以包含内容 </html>
2.单标签（非闭合标签）自结束 <meta /> 有特殊的功能
2.标签属性
charset="utf-8"
3.html文档结构
树状结构
4.浏览器读取显示内容的格式 与编辑时文本的格式不同
避免与html规则产生冲突 html转义符
&;
普通空格
  一个英文
  一个中文
<br /> 换行
编写页面格式时 尽量让编写格式与显示格式统一
-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
hello html!!! 你好 网页！！！<br />
a<werb   c>d
<!-- 显示网页中内容的标签 -->
</body>
</html>
2.html常用标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
标签显示效果
1.块元素 block 占满一行
2.内联（行内元素）元素 inline 从左到右排列
常用标签
h1-h6 标题标签 块 段间距 改字号 加粗
p 段落标签 块 段间距
div 块标签 块
dl 自定义列表
dt 列表标题
dd 列表内容
ol 有序列表
ul 无序列表
li 列表项
hr 横隔线
br 换行
u 下划线 内联元素
strong 加粗
em 斜体
span 内联标签
a
--href 路径
相对路径
项目根路径
绝对路径
锚点
#
#id值
###
--target 链接打开方式
img
--src 路径规则 同上
-->
</head>
<body>
<h1>7旬老汉竟然做出这种事</h1>
<h2>7旬老汉竟然做出这种事</h2>
<h3>7旬老汉竟然做出这种事</h3>
<h4 id="myaim">7旬老汉竟然做出这种事</h4>
<h5>7旬老汉竟然做出这种事</h5>
<h6>7旬老汉竟然做出这种事</h6>
<p>早上吃了两根油条<br/>吐了</p>
<p>吃了一碗豆腐脑</p>
<div>测试文本</div>
新文<span>本</span>
<hr>
<dl>
<dt>一个左正蹬</dt>
<dd>一个右鞭腿</dd>
<dt>一个左正蹬</dt>
<dd>一个右鞭腿</dd>
<dd>一个右鞭腿</dd>
</dl>
<ol type="I">
<li>一鞭</li>
<li>2鞭</li>
<li>3鞭</li>
<li>4鞭</li>
<li>5鞭</li>
</ol>
<ul type="square">
<li>一鞭</li>
<li>2鞭</li>
<li>3鞭</li>
<li>4鞭</li>
<li>5鞭</li>
</ul>
<hr />
<u>这是</u><strong>我</strong><em>的文</em>本
<hr />
<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E9%A9%AC%E4%BF%9D%E5%9B%BD&fenlei=256&rsv_pq=b0dfe7f20000a4c9&rsv_t=b2a9u7TnNsjBXphnZttdpTx0abc9qGZnMVbxQrDCR%2FVeimxjkqJuu4Bx2DI&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=5&rsv_sug1=3&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=10474&rsv_sug4=10475"
target="_blank">太极宗师</a>
<br />
<br />
<!--
href路径
相对路径： ./当前目录
../退回上级目录
项目根路径： /目标地址
可以忽略本身文件位置
绝对路径： 完整地址 http:// ip地址:端口号/资源地址
www.baidu.com 域名
dns服务器
202.176.145.93 电信运营商
本地文件协议 file:///盘符/资源地址
http协议 http:// ip地址:端口号/资源地址
?key=value&key=value
如果有中文 会转换为urlencode格式 %E9%A9%AC%E4%BF%9D%E5%9B%BD
通过特殊值做锚点
# 回到顶部
#标签id值 回到指定的标签位置
### 不动
src 路径
规则与href相同
-->
<a href="###">回到顶部</a>
<a href="#"><img src="img/beauty.png"></a>
</body>
</html>
3.table标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
table 表格标签
caption 表名
tr 行
th 列头 （居中加粗）
td 单元格
thead 划分数据区域
tbody
tfoot
--rowspan 跨行
--colspan 跨列
-->
</head>
<body>
<table border="1" >
<caption>学员信息表</caption>
<thead>
<tr><th>姓名</th><th>年龄</th><th>班级</th><th>性别</th></tr>
</thead>
<tbody>
<tr><td align="center" colspan="2">小明</td><td>704B</td><td>男</td></tr>
<tr><td rowspan="2">小明 2 </td><td>24</td><td>704B</td><td>女</td></tr>
<tr><td>24</td><td>704B</td><td>男</td></tr>
</tbody>
</table>
</body>
</html>
4. 表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
form 包裹表单元素 接收用户的输入 并提交
--action="index.html" 指定提交的地址
--method = "get" ?uname=aaa&upwd=bbbb url传参
method = "post" url不出现参数 参数出现在请求头的form-data中
表单中的表单元素需要有name属性
name="uname"
表单元素 接收用户的输入
input
--type = "text" 文本框
--value 默认值
--maxlength 最大长度
--placeholder 提示信息
--type = "password" 密码框 同上
--type = "hidden" 隐藏框
--type = "radio" 单选框 性别
--name 分组
--value 单选框提交时的值
--checked 默认选中
--type = "checkbox" 多选框 兴趣爱好
--name 分组
--value 提交时的值
--checked 默认选中
--type = "submit" 提交按钮 提交当前表单
--value 按钮显示的内容
--type = "reset" 重置按钮 重置当前表单
--type = "button" 自定义按钮
select 下拉菜单
option 下拉菜单项
--selected 默认选中
--value 提交的值
--disabled 禁用
textarea 多行文本
-->
</head>
<body>
<form action="index.html" method="get">
<label for="uname">用户名</label><input id="uname" name="uname" type="text" maxlength="5" placeholder="请输入用户名" value="默认值" /><br>
<label for="upwd">密码</label><input id="upwd" name="upwd" type="password" maxlength="5" placeholder="请输入密码" value="默认值2" /><br>
<input type="hidden" name="mykey" value="myval"/>
<label>化劲</label><input name="huajin" value="1" type="radio"/>一两<input name="huajin" value="2" type="radio" checked="checked" />二两<br>
<label>兴趣爱好</label><input name="hobby" value="1" type="checkbox" checked />抽烟<input name="hobby" value="2" type="checkbox" checked />喝酒<input name="hobby" value="3" type="checkbox" />烫头<br />
<input type="submit" value="我的提交" />
<input type="reset" value="我的重置" />
<input type="button" value="空白按钮" />
<hr />
<input type="email" />
<input type="color" />
<input type="datetime-local" />
<input type="file" name="myfile" />
<hr />
<select name="area">
<option value="999" disabled>----请选择-----</option>
<option value="010">北京</option>
<option value="021">上海</option>
</select>
<select name="test" multiple="multiple">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
</select>
<textarea rows="10" cols="20">默认值</textarea>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
form 包裹表单元素 接收用户的输入 并提交
--action="index.html" 指定提交的地址
--method = "get" ?uname=aaa&upwd=bbbb url传参
method = "post" url不出现参数 参数出现在请求头的form-data中
表单中的表单元素需要有name属性
name="uname"
表单元素 接收用户的输入
input
--type = "text" 文本框
--type = "password" 密码框
--type = "submit" 提交按钮 提交当前表单
-->
</head>
<body>
<form action="index.html" method="get">
<label for="uname">用户名</label><input id="uname" name="uname" type="text" /><br>
<label for="upwd">密码</label><input id="upwd" type="password" /><br>
<input type="submit" />
</form>
</body>
</html>
扫一扫
2878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
