目录
视频链接：html_韩顺平
该笔记基于韩顺平老师word笔记，程序代码需注意英文状态下双引号的输入，文中未改，可自行订正调试。
Html介绍
HyperText Mark-up Language.
Html 是一种标记语言，主要用途是开发网页，使用html可以展现文字、图片、视频、声音… html 是我们web开发（网站开发）的基础。
发展历程
横向：1993 第一个版本….>1999 有html4.01….>2008 html5.0
纵向: 1999 html4.01> xhtmlW3C
W3C是制定web(html, xml, css, xhtml …)标准的组织Html运行原理
① 本地运行
使用应用程序(浏览器)打开.html。② 远程访问运行
除了自己测试外，其他远程访问html文件。
从点击url到返回页面中间，发生了什么？
Html基本结构
- 语法
<元素 属性=‘属性值’...>内容</元素>
<元素 属性=‘属性值’.../>Html元素
- 字体
例子：
代码：
<!-- 体会基本结构 -->
<html>
<head>
<!-- 标题栏处显示 -->
<title>第一个网页</title>
</head>
<body>
<!-- 加粗标签 -->
<b>第一行文字</b>
<!-- 段落标签 -->
<!-- 字体标签，属性为颜色和大小 -->
<!-- 换行标签 -->
<p><font color= #？ size>远近高各不同</font></p><br/>
</body>
</html>- 字符实体
例子：
代码：
<html>
<head></head>
<body>
***********字符实体案例*******************</br>
<front size=7>© £</front>
</body>
</html>
- 超链接
***********超链接案例*******************</br>
<!-- target 属性 _self(替换当前页面) -->
<a href="a.html" target="_self">老鼠爱大米</a>
<!-- target 属性 _blank(开新的页面) -->
<!-- 可链接到外部网页 -->
<a href="http://www.sohu.com" target="_blank">链接到搜狐</a>
<a href="908120337@qq.com">给管理员写信</a><br/>- 图片
***********图片元素*******************</br>
<!-- 设置图片路径、高度、宽度、边框、个数 -->
<!-- img 语法方式 -->
<!-- src 可以是外部网站的照片 -->
<!-- width 和 height 纵横比锁定 -->
<img src=’dog.jpg’ width=30px border=1></img>
<img src=’dog.jpg’ width=30px border=1 />
<img src=’dog.jpg’ width=30px border=1 />- 表格
***********表格元素*******************</br>
<!-- 设置表格行数、列数、边框、居中、填充、宽度、字体居中、表内间隙、填充大小 -->
<table border=1 align=”center” bgcolor=”yellow” width=500px>
<tr align=”center”><td>1</td><td>2</td><td>4</td></tr>
</table>
<!-- cellspacing 表格间隙大小：指两个行，列间的距离 -->
<!-- cellpadding 表格填充大小：表现效果为单元格子被撑大 -->
<table cellspacing= ”50px” cellpadding=”10px”></table>- 无序列表
-
**********无序列表*******************</br>
<!-- 圆点、方块、空心点 -->
<!-- disc, square, circle -->
<ul type=”disc”>
<li>魔兽</li>
<li>反恐精英</li>
<li>英雄联盟</li>
</ul>- 有序列表
**********有序列表*******************</br>
<!-- a、A、罗马数字、古罗马数字 -->
<!-- type = “a” | “A” | “i” | “1” -->
<!-- start = “6” -->
<ol type=”1” start=”6”>
<li>魔兽</li>
li>反恐精英</li>
<li>英雄联盟</li>
</ol>- 框架标识
**********框架标识******************</br>
<!-- 将两个网页放在同一页面中,并按行或者列分割, 并固定 -->
<frameset clos=”20%, *” frameborder=0>
<frame src=”aa.html” noresize />
<frame src=”bb.html”/>
</frameset>- 表单元素
**********login.html******************</br>
<!-- 制作登陆页面如上,输入用户名和密码(静态),点击登陆后显示后续页面 -->
<html>
<head>
<title>登陆页面</title>
</head>
<body>
<h1>登陆系统</h1>
<!-- action 后为指向页面 -->
<!-- 提交方法 get/post -->
<form action=”ok.html” method=”post”>
<!-- 密码和用户名汉字对齐，全角符号下输入空格，或者 两次占一个汉字的空间 -->
用户名：<input type=”text” name=”username”/><br/>
密 码：<input type=”password” name=”pwd” /><br/>
<input type=”submit” value=”登陆”/><input type=”reset” value=”重填”/>
</form>
</body>
</html>
**********formdetails.html******************</br>
<!-- 表单元素, 复选框、单选框、隐藏框、选择条目框、文本框、文本控件 -->
名字：<input type=”text” value=”input here” name=”username” /<br/>
密码：<input type=”password” name=”pwd” /><br/>
***喜欢的水果***<br/>
<input type=”checkbox” name=”v1”>西瓜<br/>
<input type=”checkbox” name=”v1”>苹果<br/>
***选择性别***<br/>
<input type=”radio” name=”sex”>男<br/>
<input type=”radio” name=”sex”>女<br/>
***隐藏框(可提交数据但是不影响界面布局)***<br/>
<input type=”hidden” value=”123” name=”sal”>
###接上页###
***下拉选择***<br/>
请选择你的出生地：
<select name=”birthplace”>
<option value=””>---请选择---</option>
<option value=”beijing”>北京</option>
<option value=”shanghai”>上海</option>
</select><br/>
***请留言***<br/>
<textarea clos=”30” rows=”10”></textarea><br/>
***请选择你要上传的文件***<br/>
<input type=”file” name=”myfile”/>请选择文件强化作业
- 元素类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 设置边框，间隙距离，填充距离，宽度和颜色(可通过FastStone Capture取色) -->
<table border="1" cellspacing=0 cellpadding=10 width=700px bordercolor="#DB9EE0">
<!-- 五行三列，文本居中 -->
<tr align="center" ><td colspan="3">星期一食谱</td></tr>
<tr align="center"><td rowspan="2">素菜</td><td>青草茄子</td><td>花椒扁豆</td></tr>
<tr align="center"><td>小葱豆腐</td><td>炒白菜</td></tr>
<tr align="center"><td rowspan="2">荤菜</td><td>油闷大虾</td><td>海参鱼翅</td></tr>
<tr align="center"><td>红烧肉<img width="100px" src="C:\Users\Larry Young\Desktop\1.jpg" alt=""></td><td>烤全羊</td></tr>
</table>
</body>
</html>- 设计企业邮箱
登陆页面：
后续页面：
待改
- 模仿豆瓣页面
正在赶来的路上
3817
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
