Html
一、基本结构
| <!DOCTYPE html>//HTML标志 |
| <html> |
| |
| <head> |
| |
| <title>原神</title> |
| |
| |
| |
| |
| <meta charset = "UTF-8"/> |
| </head> |
| |
| |
| |
| |
| |
| <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> |
| |
| 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标题标签
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列表标签
| |
| |
| |
| |
| |
| |
| |
| <ul type = "circle"> |
| <li>热血</li> |
| <li>心中</li> |
| <li>流动</li> |
| </ul> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <ol type = "i"> |
| <li>oh</li> |
| <li>鸡</li> |
| <li>鸡</li> |
| <li>爆 |
| <ul>//列表可以相互嵌套 |
| <li>一切</li> |
| <li>掌握</li> |
| <li>手中</li> |
| </ul> |
| </li> |
| </ol> |
4.6超链标签
| |
| |
| |
| |
| |
| |
| |
| |
| <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> |
| ....... |
| |
| <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基本框架
| |
| |
| |
| |
| |
| |
| |
| |
| <form action = "wwww.woaidaqiqiu.comm" method = "get"> |
| ... |
| ... |
| </form> |
6.2input元素
| |
| |
| |
| |
| |
| 你是什么猴:<input type="text" placeholder="猴子类型"/><br/> |
| 证明你是:<input type="password" /><br/> |
6.3单选多选
| |
| |
| |
| |
| |
| |
| |
| 性别:<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按钮
| |
| |
| |
| |
| |
| <input type = "submit" value = "拿下"> |
| <input type = "reset" value = "重开"> |
| |
| |
| |
| <button type = "reset">双击一下试试，奇迹就要发生</button> |
6.5两个域
| |
| <input type = "file"/>//闭上眼睛，聆听名刀破碎的声音 |
| |
| |
| |
| <input type = "hidden" name = "id" value = "梦之泪伤"> |
6.6下拉列表
| |
| |
| |
| |
| |
| |
| |
| <select multiple> |
| <option value = "wzry">梦泪</option> |
| <option value = "yxlm">污渍</option> |
| <option selected ="selected">请选择你的英雄</option> |
| </select> |
6.7文本框
| |
| |
| |
| |
| |
| |
| 21横扫：<textarea rows="5" cols="30" placeholder = "一枪捅碎了我的冠军梦"></textarea> |
6.8特殊字符
| |
| |
| |
| |
| |
| |
| |
| |
| <p>jk<uzi</p> |
| <p>uzi>jk</p> |
| <p>1! 5!</p> |
| <p>©</p> |
