Udemy网页课程2-HTML
http://example.com/ 查看网页源代码（简单的网页模版）
网页结构
<html>
<head>
<title>标题</title>
</head>
<body>
<div>将网页内容分成一段一段来处理</div>
</body>
</html>
文件头
<h1></h1>... <h6></h6> 从h1到h6 字体逐渐变小
<br />break line 换行，换行之间的间距很小 html5可以不加反斜杠
<hr /> 添加分割线
格式化文字
<p></p> paragraph 设置段落，段落之间的间距较大
<strong></strong> 加在其间的字体加粗
<em></em> emphasis 加在其间的字体倾斜
<u></u> underline 加在其间的字体有下划线
<strike></strike> 加在其间的字体有删除线
unorderlist
<h4> top cryptocurrency</h4>
<ul>
<li>bitcoin</li>
<li>ethereum</li>
<li>eos</li>
</ul>
输入效果如下：
orderlist
<h4>promising technology</h4>
<ol>
<li>big date</li>
<li>AI</li>
<li>blockchain</li>
</ol>
输入结果如下：
添加图片
<img src = "a.png" /> 调用本地保存的图片
<img src = "http://img0.imgtn.bdimg.com/it/u=3965859710,1647615842&fm=27&gp=0.jpg" width ="500" height = "300" /> 调用互联网上的图片 并可以设置图片宽度width，图片高度height。
添加表单
<form>
<input type = "email" placeholder = "请输入邮箱"> <!-- 提示输入邮箱 -->
<textarea></textarea> <!-- 输入一段文件，长度可动态调整 -->
<select> <!-- 选择项 -->
<option>A</option>
<option>B</option>
</select>
<input type = "radio"> 红色 <!-- 单选择项，没有约束，可以所有选项同时选择 -->
<input type = "radio"> 蓝色
<input type = "radio" name = "颜色选择">红色 <!-- 有name约束，只能选择其中一项 -->
<input type = "radio" name = "颜色选择">蓝色
<input type = "checkbox" name = "dog"> 狗 <!-- 多选项，name不同选择多个，以对勾选择展示 -->
<input type = "checkbox" name = "cat"> 猫
<input type = "checkbox" name = "fish"> 鱼
<input type = "submit" value = "click me!"> <!-- 提交,将相关选择数据传到后台 -->
</form>
超链接
href = hyperlink reference
<a href = "http://www.baidu.com">baidu</a> <!-- 指向百度的超链接-->
HTML Entities
https://www.tutorialspoint.com//html/html_entities.htm //在此网站可以查询相关的子令
<a> 相当于<a>
Iframe 引用其他网页资源 视频等
<iframe height=498 width=510 src='http://player.youku.com/embed/XMzY2MDk5MDI2MA==' frameborder=0 'allowfullscreen'></iframe>
HTML5 播放音频
<audio controls>
<source src ="111.mp3" type = "audio/mpeg" > <!-- 考虑兼容也可以使用audio/ogg -->
</audio>
HTML5 输入框
标签框
<label for="form-name">click this table</lable>
<input type="text" id ="form-name">
搜索框
<label for="form-search">search</lable>
<input type="search" id ="form-search">
邮箱框
<label for="form-email">email</lable>
<input type="email" id ="form-email">
url
<label for="form-url">url</lable>
<input type="url" id ="form-url">
数字框
<label for="form-number">number</lable>
<input type="number" id ="form-number" min ="1" max="100" step="10">
数字范围框
<label for="form-range">range</lable>
<input type="range" id ="form-range" min ="1" max="1000" value="10">
日期框
<label for="form-date">date</lable>
<input type="date" id ="form-range" min ="2000-1-1" >
颜色
<label for="form-color">color</lable>
<input type="color" id ="form-color" >
