01.入门案例
2019-01-16 本文已影响0人
看星星晒月亮
01.网站的简单功能
普通文本eg:txt无法实现，故使用超文本实现网站
HTML概述：
HTML:Hyper Text Markup Language超文本标记语言
超文本：比普通的文本语言功能强大，可以添加各种样式
标记语言：通过一组标签来对内容进行描述<关键字>
入门案例：
<h1>静夜思</h1>
<b><i>--李白</i></b><br/>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
<h1></h1>表示标签头和标签结尾；
表示换行；
<p></p>换行，会在首尾都加一个换行符；
<b></b>加粗；
<i></i>斜体；
02.HTML的主要作用：
HTML语法规范：
<!DOCTYPE html>
<!--
1.文档声明遵循html5规范
2.根标签html
3.html文件主要包含两部分，头部分和体部分
头部分主要用来放置一些页面信息
体部分主要放置页面内容
4.通过标签对内容进行描述，标签通常是由开始标签和结束标签组成
5.标签不区分大小写，官方建议使用小写
-->
<html>
<head>
<!--网站配置信息-->
<meta charset="utf-8"><!--指定浏览器打开界面的编码方式>
<!--指定网站标题-->
<title>入门案例01</title>
</head>
<body>
hello world！
</body>
</html>
03.简单案例分析：
案例图片.png
1.公司简介需要标题
2.水平分割线
3.四个段落文字
4.第一段部分字体需要红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--标题标签后边的数字范围是1-6，超过6的变成普通文本-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<h7>标题6</h7><!--普通文本-->
<hr/><!--水平分割线-->
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<!--font标签常用属性
color：颜色
size:字体大小，范围1-7
face:字体格式
-->
改变<font color="red" size="1">部分字体</font><br/>
改变<font color="red" size="2">部分字体</font><br/>
改变<font color="red" size="3">部分字体</font><br/>
改变<font color="red" size="4" face="仿宋">部分字体</font><br/>
改变<font color="red" size="5">部分字体</font><br/>
改变<font color="red" size="6">部分字体</font><br/>
改变<font color="red" size="7">部分字体</font><br/>
</body>
</html>
案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站信息页面</title>
</head>
<body>
<h3>公司简介</h3>
<hr/>
<p><font color="red">第一段啦啦啦啦啦啦啦啦啦啦</font>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦来来来</P>
<p>第二段啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦来来来</P>
<p>第三段啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦来来来</P>
<p>第四段啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦来来来</P>
</body>
</html>
