HTML-学习笔记01
HTML
1、初识HTML
标签 -- > 承载内容
标签教程：https://www.runoob.com/tags/html-reference.html
层叠样式表 -- > 渲染页面
JavaScript -- > 交互式行为
<!-- 页面文档类型声明-->
<!DOCTYPE html>
<!-- 起始标签-->
<html lang="en">
<!-- 不展示在页面中-->
<head>
<!-- 指定编码格式为utf-8-->
<meta charset="UTF-8">
<title>逆流的鱼</title>
<!-- css cascading style sheet-->
<!-- 样式，写在head之中-->
<style>
h1{
color: purple;
font-size: 80px;
font-family: '华文行楷';
}
p{
color: red;
font-size: 20px;
font-family: '华文行楷';
}
body{
color: blue;
font-size: 20px;
font-family: '华文行楷';
}
.a{
color: green;
}
.b{
color: black;
}
</style>
</head>
<!-- 页面内容-->
<body>
</body>
</html>
2、javascripts
<script>
function showWriter() {
window.alert('作者：李白')
}
</script>
3、文本标签+字符实体
文本标签
h1~h6 : 标题 heading
hr ：水平标尺 horizontal ruler
p : 段落 paragraph
sub / sup 下标或上标
em / strong 强调
del / ins 删除线或下划线
br : break ruler 折行
<!-- h1 标签-->
<h1> 逆流的鱼 </h1>
<!--水平分割线-->
<hr>
<!--加断句-->
<em>君不见</em>黄河之水<strong>天上来</strong><br>
<ins>奔流</ins>到海不复还<br>
君不见高堂明镜悲<del>白发</del><br>
<p class="b"> 朝如青丝暮成雪</p>
<p class="a"> 人生得意须尽欢</p>
<p> 莫使金樽空对月</p>
<button onclick="showWriter()">显示作者</button>
<hr>
笑看风云<sub>人生如斯</sub><sup>天地悠悠</sup>
列表标签
有序列表 ol -- ordered list
无序列表 ul -- unordered list
li -- list item
定义列表 dl -- definition list
dt -- definition title
dd -- definition description
<h2>逆流的鱼喜欢的书</h2>
<ol>
<img src="fisher.png" height="140" width="235">
<li>红楼梦</li>
<li>三国演义</li>
<li>从优秀到卓越</li>
</ol>
<ul>
<li>西厢记</li>
<li>围城</li>
<li>梦的解析</li>
</ul>
<dl>
<dt>Python</dt>
<dd>面向对象的编程语言</dd>
<dd>动态弱类型语言，需要解释器 才能执行</dd>
</dl>
字符实体表
https://www.w3school.com.cn/html/html_entities.asp
字符实体 / 实体替换符
 : 空格
< > : 尖括号
4、嵌套列表+图像标签
<ul>
<li>西厢记</li>
<li>围城</li>
<li>梦的解析</li>
<li>小说类
<!-- 列表嵌套-->
<ol>
<li>百年孤独</li>
<li>简.爱</li>
<li>平凡的世界</li>
</ol>
</li>
</ul>
<!-- 图片标签,不建议在此改图片大小，应让美工按要求做出实际大小-->
<!-- 图片标签,可以是本地图片，也可以是网页图片的URL-->
<img src="pic.jpg" height="435" width="300">
5、超链接标签
超链接标签
<body>
<h1>逆流的鱼经常浏览的网站</h1>
<ul>
<!-- anchor a标签 href 超链接 target 默认当前窗口，_blank 新窗口打开-->
<!-- 这种连接叫页面连接-->
<li><a href="https://www.baidu.com" target="_blank">百度</a></li>
<li><a href="https://cn.bing.com" target="_self">必应</a></li>
<li><a href="https://www.jd.com">京东</a></li>
<li>
视频网站
<ul>
<li><a href="https://movies.youtube.com" target="_blank">Youtube</a></li>
<li><a href="https://www.bilibili.com/" target="_blank">B站</a></li>
</ul>
</li>
</ul>
</body>
</html>
锚点链接
在页面中预先设置锚点，在浏览页面时，方便快速跳转。
<!-- 放在页面顶部，name="top"是锚点-->
<a name="top"></a>
<!-- 放在页面顶部，引用跳转到锚点位置，可以是当前页，也可以是新的页面-->
<a href="#bottom">去底部</a>
<!-- 放在页面底部-->
<a name="bottom"></a> <a href="#top">回顶部</a>
功能连接
点击功能可以执行一个动作，如发邮件，或者打开某个应用。
<a href="mailto:admin@outlook.com">联系管理员</a>
6、HBuilder的安装使用
下载地址：无须安装，解压后直接使用。
<!-- HBuilder里输入ol>li*5的结果-->
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- HBuilder里输入ol>li*3>a的结果-->
<ol>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ol>
7、表格标签
快速制表
<!-- HBuilder里输入table>tr*2>td*3,然后按下Tab键的结果，tr行，td列-->
<table border="1">
<tr>
<td>姓名</td>
<td>英语</td>
<td>语文</td>
</tr>
<tr>
<td>王二锤</td>
<td>85</td>
<td>90</td>
</tr>
</table>
表格样式编辑
在标签开头双击，会选中整个标签内容，然后按ctr+]在其外套一层标签
rowspan 跨行，colspan跨列
<table border="1">
<caption>学生成绩表</caption>
<!--表头th居中加粗显示，width设置列宽 -->
<!--在标签开头双击，会选中整个标签内容，然后按ctr+]在其外套一层标签 -->
<thead>
<tr>
<th width='120'>姓名</th>
<th width='100'>英语</th>
<th width='100'>语文</th>
<th width='100'>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>王二锤</td>
<td>85</td>
<td>90</td>
<td>90</td>
</tr>
<!--rowspan 跨行，colspan跨列 -->
<tr>
<td>金三胖</td>
<td rowspan="2">70</td>
<td colspan="3" align="center">90</td>
<td>90</td>
</tr>
<tr>
<td>王麻子</td>
<td>70</td>
<td>90</td>
<td>90</td>
</tr>
</tbody>
</table>
8、TCP+IP模型
Internet - TCP/IP 模型 -- 协议族
四层模型：
应用层 -- HTTP/SMTP/POP3/FTP/SSH/ICQ/QQ
传输层 -- TCP/UDP - 端到端传输
TCP 有滑动窗口，可以做流量控制
拥塞控制，通过监测流量来控制速率
IP层（网络层）-- 寻址和路由
网络接口层 -- 接入网络（分帧，校验）
9、表单标签 -- form
html -- Hyper-Text Markup Language
http -- Hyper-Text Transfer Protocol
-get -- 从服务器获取资源（网页、图片、音视频）
-post -- 提交数据给服务器
-delete
-put
-patch
表单实际是键值对，需要通过下拉或复选框选择的，必须要有name 和value 属性，键盘输入的可以没有
textarea 输入多行数据
<html>
<head>
<meta charset="utf-8">
<title>注册sample</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<!--给信息加边框和说明信息-->
<fieldset>
<legend>用户基本信息</legend>
<!-- 加上required，表示改字段必填，placeholder 占位符 -->
<p>
用户名：
<input type="text" name="username" size="30" maxlength="20" placeholder="用户名由6-20个字符组成" required/>
</p>
<p>
密码：
<input type="password" name="password" required/>
</p>
<p>
确认密码：
<input type="password" name="repassword" required/>
</p>
<!--radio 单选按钮 -->
<p>
性别：
<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value=0"" > 女
</p>
<!--checkbox 多选按钮 -->
<p>
爱好：
<input type="checkbox" name="fav" value="阅读"> 阅读
<input type="checkbox" name="fav" value="旅游"> 旅游
<input type="checkbox" name="fav" value="美食"> 美食
<input type="checkbox" name="fav" value="运动"> 运动
</p>
<!--select>option*5 Tab -->
<p>
省份：
<select name="Province" id="">
<option value="110000">北京</option>
<option value="120000">天津</option>
<option value="310000">上海</option>
<option value="500000">重庆</option>
<option value="810000" selected>贵州</option>
</select>
</p>
<p>
生日：
<input type="date" name="birthday"/>
</p>
<p>
邮箱：
<input type="email" name="email" required/>
</p>
<p>
自我介绍：
<textarea name="introduction" id="" cols="30" rows="10"></textarea>
</p>
<p>
头像：
<input type="file" name="portrait" />
</p>
<p>
注册：
<input type="submit" value="确认注册"/>
<input type="reset" value="重新填写"/>
</p>
</fieldset>
</form>
</body>
</html>
10、音频/视频标签
audio -- 音频
video -- 视频
<body>
<audio controls autoplay src="test-audio.mp3">梁山伯与朱丽叶</audio> <br>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=16435049&auto=1&height=66"></iframe>
<br />
<video width="400" height="500" controls>
<source src="test.mp4" />
</video>
</body>
11、相对路劲和其他标签
<!-- src 使用的相对路劲 -->
<figure>
<img src="img/music.jpg" alt="">
<figcaption>图1.music</figcaption>
</figure>
<!-- 内联框架：嵌套网页 -->
<iframe src="http://map.baidu.com" width="400" height="600" frameborder="0"></iframe>
12、块级元素和行级元素
行级标签：共享一行
a, img, iframe, button, span, input
块级标签：独享一行
h1-h6, p, div, ul, ol, dl, table, hr, form
***************用努力照亮现实的梦！***********************
本文来自博客园，作者：逆流的鱼2016，转载请注明原文链接：https://www.cnblogs.com/orange2016/p/16952867.html
