走进HTML
文章目录
什么是HTML
HTML
- Hyper Text Markup Language(超文本标记语言)
HTML基本结构
<html><!--根标签-->
<head>
<title>我的第一个网页</title>
<!-- 网页头部 -->
</head>
<body>
我的第一个网页
<!-- 主体部分 -->
</body>
</html>
注意
<body>、</body>等成对的标签,分开叫开放标签和闭合标签
单独呈现的标签(空元素),如<hr/>;意为/来关闭空元素
网页的基本标签
标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
段落标签
<P>...</P>
...
换行标签
<br/>
水平线标签
<hr/>
字体样式标签
加粗:<strong>...</strong>
斜体:<em>...</em>
加粗:加粗
斜体:斜体
注释和特殊符号
特殊符号 | 字符实体 | 示例 |
---|---|---|
空格 |   ; | ```百度 |
大于号(>) | > > ; | 如果时间> ;晚上6点,就坐车回家 |
小于号(<) | < < ; | 如果时间< ;早上7点,就走路去上学 |
引号(") | " " ; | W3C规范中,HTML的属性值必须用成对的" ;引起来 |
版权符号@ | © © ; | © ;2008-2018课工场 |
图像标签
常见的图像格式
- JPG
- GIF
- PNG
- BMP
链接标签
常用的超链接
页面间链接
- 从一个页面链接到另一个页面
锚链接
- 从A页面的甲位置跳转到本页中的乙位置
- 从A页面的甲位置跳转到B页面中的乙位置
创建步骤
- 创建跳转标记
<a name="marker">乙位置</a>
乙位置
- 创建跳转链接
<a href="#marke">甲位置</a>
功能性链接
- 电子邮箱
- MSN
<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>
示例邮件链接
联系我们
列表的分类
无序列表
<ul><!--声明无序列表-->
<li>范冰冰演藏族女孩</li><!--声明列表项-->
<li>装死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ul>
示例:无序列表
热搜
- 范冰冰演藏族女孩
- 装死两个人后自拍
- 诗隆甜蜜出游
- 一线城市楼市退烧
有序列表
<ol><!--声明有序列表-->
<li>范冰冰演藏族女孩</li><!--声明列表项-->
<li>装死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ol>
热搜
- 范冰冰演藏族女孩
- 装死两个人后自拍
- 诗隆甜蜜出游
- 一线城市楼市退烧
定义列表
<dl><!--声明定义列表-->
<dt>水果</dt><!--声明列表项-->
<dd>苹果</dd>
<dd>桃子</dd>
<dd>李子</dd><!--定义列表项内容-->
</dl>
-
水果
- 苹果
- 桃子
- 李子 蔬菜
- 白菜
- 黄瓜
- 西红柿
表格
- 为什么使用表格
- 简单通用
- 结构稳定
表格的基本语法
<table>
<tr>
<th>1行1列的标题</th>
<th>1行2列的标题</th>
<th>1行3列的标题</th>
</tr>
<tr>
<td>1行1列的单元格</td>
<td>1行2列的单元格</td>
<td>1行3列的单元格</td>
</tr>
<tr>
<td>2行1列的单元格</td>
<td>2行2列的单元格</td>
<td>2行3列的单元格</td>
</tr>
</table>
1行1列的标题 | 1行2列的标题 | 1行3列的标题 |
---|---|---|
1行1列的单元格 | 1行2列的单元格 | 1行3列的单元格 |
2行1列的单元格 | 2行2列的单元格 | 2行3列的单元格 |
表单在网页中的应用
表单语法
<from method="post" action="result.html">
<p>名字:<input name="name" type="text"/></p>
<p>密码:<input name="pass" type="password"/></p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填"/>
</p>
</from>
名字:
密码:
表单元素格式
input元素类型
- 文本框————text
- 密码框————password
- 单选按钮————radio
- 复选框————checkbox
- 列表框————select、option
- 按钮————reset、submit、button
- 多行文本域————textarea
- 文本域————file
表单的高级应用
影藏域hidden
<input type="hidden" value="666" name="userid"/>
只读和禁用
练习
练习1:制作《清平乐》
清平乐
年年雪里,常插梅花醉,挼尽梅花无好意,赢得满衣清泪!
今年海角天涯,萧萧两鬓生华。
看取晚来风势,故应难看梅花。
练习2:制作京东新闻资讯页面
看不见的完美硬币:细节的负担
创新公司皮克斯的启示
细节从来都是个好东西,完美的细节往往给我们赢得事业上的胜利。
但是,在皮克斯,这一家满是完美主义设计师的企业里,细节竟然成了负担。
怎么打造完美的细节?又怎么赢得商业上的利益,皮克斯总裁艾德•卡特姆为我们解答。
看不见的完美硬币:细节的负担
练习3:制作音乐排行榜
音乐排行榜
练习4:制作人人网注册页面
![](img/01.png)
电子邮箱:
设置密码:
真实姓名:
性别
生日: 1991 1992 1993 1994 1995 年 12 11 10 9 8 7 月 31 30 29 28 日
为什么要填写我的生日?
我现在: 学生 老师
![](img/02.png)
为什么要填写我的生日?
我现在: 学生 老师
![](img/02.png)