HTML入门
HTML概述
HTML: Hyper Text Markup Language 超文本标记语言
超文本: 比普通文本功能更加强大,可以添加各种样式
标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行
<h1>静夜诗</h1>
<b><i>--李白</i> </b> <br/>
<p>床前明月光,</p>
<p>地上鞋两双,</p>
<p>举头望明月,</p>
<p>低头思故乡.</p>
HTML语法规范
- 上面是一个文档声明
- 根标签 html
- html文件主要包含两部分. 头部分和体部分
头部分 : 主要是用来放置一些页面信息
体部分 : 主要来放置我们的HTML页面内容 - 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成
- 标签不区分大小写, 官方建议使用小写
入门案例
需求分析
设计如图网页
步骤分析
- 公司简介 需要标题
- 水平分割线
- 四个段落
- 第一个段落字体需要红色
代码实现
<html>
<head>
<meta charset="UTF-8">
<title>网站信息页面</title>
</head>
<body>
<!--
1. 公司简介 需要标题
2. 水平分割线
3. 四个段落
4. 第一个段落字体需要红色
-->
<!--
h1标题:
h后面数字取值范围: 1~6
-->
<h3>公司简介</h3>
<hr />
<p>
<!--
font标签常用属性
color:颜色
size :改变字体大小 范围1-7
face：字体
-->
<font color="red">“中关村黑马程序员训练营”</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
</p>
<p>
<strong>黑马程序员</strong>的学员多为大学毕业后，<em>有理想、有梦想，</em>想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
</p>
<p>
中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>
</body>
</html>
扩展内容
b : 加粗
i : 斜体
strong: 加粗, 带语义标签
em: 斜体, 带语义
网站图片信息案例
需求分析
在我们的网站中通常需要显示LOGO图片
技术分析
img 标签
常用的属性
- width : 宽度
- height: 高度
- src : 指定文件路径
- alt: 图片加载失败时的提示内容
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
常用属性:
src : 指定图片路径
width : 指定图片宽度
height : 图片高度
alt : 文件加载失败时的提示信息
-->
<img src="../img/美女22.jpg" width="500px" alt="这张图片可能加载问题" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--在网页中显示图片-->
<img src="../img/logo2.png" width="30%"/>
<img src="../image/header.jpg" width="30%" />
</body>
</html>
扩展内容
文件路径
- 相对路径
./ 代表的是当前路径
../ 代表的上一级路径
../../ 上上一级路径
网站友情链接页面案例
需求分析
在我们的网站中,通常会显示友商公司的网站链接
- 百度
- 新浪微博
- 黑马程序员
技术分析
列表标签
无序列表: ul
- type: 小圆圈,小圆点, 小方块
有序列表: ol
- type: 1,a ,A,I,
- start : 指定是起始索引
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
1.使用无序列表
百合网
世纪家园
珍爱网
非诚勿扰
-->
<body>
<ul>
<li><a href="http://www.baihe.com" target="_blank">百合网</a></li>
<li><a href="http://www.jiayuan.com">世纪家园</a></li>
<li>珍爱网</li>
<li>非诚勿扰</li>
</ul>
</body>
</html>
扩展内容
点击链接,跳转去指定网站： a 超链接标签
常用的属性:
- href: 指定要跳转去的链接地址
如果是网络地址需要加上http协议，如果访问的是本网站的html文件，可以直接写文件路径 - target : 以什么方式打开
- _self: 默认打开方式,在当前窗口打开
- _blank: 新起一个标签页打开页面
