Html
一、基本结构
<!DOCTYPE html>//HTML标志
<html>
<!--这是网页头部-->
<head>
<!--标题-->
<title>原神</title>
<!--
网页元信息————对网页进行设置
编码设置
-->
<meta charset = "UTF-8"/>
</head>
<!--
这是网页躯干
需要在浏览器的内容区域显示的内容要设置在body中
-->
<body>
<h2><p>原神启动</p></h2>
</body>
</html>
二、书写规范
- 部分标签不是成对存在：<br/><hr/><img/>
- 属性：标签内部，key = “value”,写在前标签
- 标签可以嵌套
三、头部
<title><title/> 浏览器的标题栏
<meta charset = “UTF-8”/> 设置编码，防止出现乱码
乱码的原因：编码与解码的编码表对应不起来
<style type="text/css">//定义全局样式 .c1{ color:red; } .c2{ color:blue; } </style><script> //定义一个JS函数 function yuanshen(){ alert("原来你也玩原神"); } </script>
四、简单标签
4.1排版标签
实现简单的页面布局
- <p></p>:段落
- align属性：left左对齐 center居中 right右对齐
- <hr>:水平线标签 eg：<hr width=“50%” size=“5px” color=“#0000FF” align=“center”/>
4.2文字标签（被css替代）
- <font size=“7” color=“yellow” face=“微软雅黑”></font>:文字标签
4.3标题标签
- <h1><h1/>:h1~h6共六级标题
4.4文本格式化标签
<b>粗体标签</b><br/>
<strong>加粗</strong><br/>
<em>强调字体</em><br/>
<i>斜体</i><br/>
<small>小号字体</small><br/>
<big>大号字体</big><br/>
<p>上标标签<sup>2</sup></p>
<p>下标标签<sub>2</sub></p>
<del>删除线</del>
4.5列表标签
<!--
无序
type属性用来定义符号的类型
cicle：空心圆
disc：实心圆
square：黑色方块
-->
<ul type = "circle">
<li>热血</li>
<li>心中</li>
<li>流动</li>
</ul>
<!--
有序
type属性用来定义符号的类型
1：数字类型
A：大写字母类型
a：小写字母类型
I：大写古罗马
i：小写古罗马
start用来定义起始值
-->
<ol type = "i">
<li>oh</li>
<li>鸡</li>
<li>鸡</li>
<li>爆
<ul>//列表可以相互嵌套
<li>一切</li>
<li>掌握</li>
<li>手中</li>
</ul>
</li>
</ol>
4.6超链标签
<!--
href属性：指定连接路径，既可以是本地的路径，也可以是网络中的路径
title属性：指定连接提示文字
target属性：连接目标窗口打开方式，target的取值如下
_blank:在新窗口中打开链接文档
_self:默认值 在相同框架中打开被链接文档
title属性和target属性可以没有
-->
<a href = "https://baike.baidu.com/item/猪猪侠/9565890"
title = "GG BOND" target = "_blank"> GG BOND</a>
<a href="test.html" target = "_blank">原神</a>
返回顶部的实现方式：
<!-- 创建锚点 -->
<a name="fly"></a>
.......
<!-- 创建能回到start位置的连接 -->
<a href = "#fly">起飞，哎，飞~</a>
五、表格标签
5.1普通表格
<!--定义表格-->
<table border = "1">
<!--定义表格标题-->
<caption>男神</caption>
<!--定义行-->
<tr>
<!--定义列标题-->
<th>姓名</th>
<th>性别</th>
<th>特点</th>
</tr>
<tr>
<!--定义表格单元-->
<td>马嘉祺</td>
<td>自行车座</td>
<td>学霸</td>
</tr>
</table>
5.2跨行跨列表格
<table border = "1">
<caption>s帅逼榜</caption>
<!--定义行-->
<tr>
<th>姓名</th>
<th>性别</th>
<th>特点</th>
</tr>
<tr>
<td>马嘉祺</td>
<td>自行车座</td>
<td>学霸</td>
</tr>
<tr>
<td rowspan = "2">范冰丞</td>//跨行用rowspan
<td>弟弟</td>
<td rowspan = "2">双生武魂</td>
</tr>
<tr>
<td>姐姐</td>
</tr>
<tr>
<td>宋亚轩</td>
<td colspan = "2">超绝肌肉线条</td>//跨列用colspan
</tr>
</table>
六、表单标签
6.1基本框架
<!--
action:指定服务器地址
method：提交的方式
get方式：默认，通过地址传递，不传敏感/大量数据、附件
post方式：不通过地址，可传大量和附件
enctype:表单类型
-->
<form action = "wwww.woaidaqiqiu.comm" method = "get">
...
...
</form>
6.2input元素
<!--
type表示表单元素类型
value表示初始值
name表示表单元素名称，通常用于给服务器传递数据时使用
-->
你是什么猴:<input type="text" placeholder="猴子类型"/><br/>
证明你是:<input type="password" /><br/>
6.3单选多选
<!--
radio:单选
checkbox:多选 同组name相同，表示表单元素名称，通常用于给服务器传递数据时使用
checked表示默认选中
type表示表单元素类型
value：传给服务器的值
-->
性别:<input type = "radio" name = "male" checked>公
<input type = "radio" name = "male">母
</br>
作用:</br>
<input type = "checkbox" name = "ablity">回旋镖，嗷嗷嗷嗷</br>
<input type = "checkbox" name = "ablity">德鲁伊，TM熊的力量</br>
<input type = "checkbox" name = "ablity">直升机，牢大你在哪</br>
<input type = "checkbox" name = "ablity">biabiabia，biabiabia~</br>
6.4按钮
<!--
button：普通按钮
submit：提交表单按钮
reset：重置表单按钮
-->
<input type = "submit" value = "拿下">
<input type = "reset" value = "重开">
<!--button默认type值是submit-->
<button type = "reset">双击一下试试，奇迹就要发生</button>
6.5两个域
<!--文件域-->
<input type = "file"/>//闭上眼睛，聆听名刀破碎的声音
<!--
隐藏域:需要给服务器提交数据，但是不希望被用户看到
-->
<input type = "hidden" name = "id" value = "梦之泪伤">
6.6下拉列表
<!--
下拉列表（单选）
单选下拉列表：<select></select>
列表项：<option></option>
默认选中属性：selected="selected"
多选：multiple
-->
<select multiple>
<option value = "wzry">梦泪</option>
<option value = "yxlm">污渍</option>
<option selected ="selected">请选择你的英雄</option>
</select>
6.7文本框
<!--
文本框
<textarea cols="列" rows="行"> </textarea>
rows：高
cols:宽
-->
21横扫：<textarea rows="5" cols="30" placeholder = "一枪捅碎了我的冠军梦"></textarea>
6.8特殊字符
<!--
特殊字符
< <
> >
空格
& &
© ©
-->
<p>jk<uzi</p>
<p>uzi>jk</p>
<p>1! 5!</p>
<p>©</p>
