Wed前端--HTML基础
目录
一、开发工具
二、HTML文档结构
2.1头部head
2.1.1title标记
2.1.2元信息meta标记
具体实例
编辑
一、开发工具
最基础的开发工具是：HBuilder
二、HTML文档结构
HTML文档由头部head和主体body组成
头部head标记中可以定义标题样式，头部信息不显示在网页上；
主体body 标记中可以定义段落，标题字，超链接，脚本，表格，表单
HTML文档的基本结构如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>2.1头部head
头部head标记主要包含页面标题标记，元信息标记，样式标记，脚本标记，链接标记
头部标记所包含的信息不会展示在网页上。
2.1.1title标记
语法说明
<title>是开始标记
</title>是结束标记
两者之间内容显示在浏览器的标题栏上
例如：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>页面标题</title></head><body></body>
</html>
2.1.2元信息meta标记
meta标记用来描述一个HTML网页文档属性，也称为元信息，这些信息不会显示在浏览器页面中，例如：作者，日期，时间
基本语法
<meta name=""content="" ><meta http-equiv=""content="">name属性用于描述网页，它是“名称/值”形式中的名称，name属性的值所描述的内容通过content属性表示，便于搜索引擎机器人查找，分类，其中最重要的是description、keywords、 robots
http-equiv属性用于提供HTTP协议的响应头报文，它回应给浏览器一些有用的信息，以帮助浏览器正确精准的显示网页内容，http-equiv属性的值所描述的内容通过content属性表示
meta标记的属性、取值如下所示
具体实例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>传统美德故事：铁杵磨成针</title><style type="text/css">div{text-align: center;}p{text-align: left;text-indent:2em;margin: 3px ;}strong,em(color:red;)</style> </head><body bgcolor="#FEFEFE" leftmargin="100px"rightmargin="100px"><h2 align="center">传统美德故事：铁杵磨成针</h2><hr size="1"color="red"width="100%" /><div id="class="><img src="R-C.jpg" /><p>唐朝大诗人李白，小时候不喜欢读书。一天，乘老师不在屋，悄悄溜出门去玩儿。他来到山下小河边，见一位老婆婆，在石头上磨一根铁杵。李白很纳闷，上前问：“老婆婆，您磨铁杵做什么？”老婆婆说：“我在磨针。”李白吃惊地问：“哎呀！铁杵这么粗大，怎样能磨成针呢？”老婆婆笑呵呵地说：“只要天天磨铁杵总能越磨越细，还怕磨不成针吗？” </p><p>聪明的李白听后，想到自己，心中惭愧，转身跑回了书屋。从此，他牢记<strong>“只要功夫深，铁杵磨成针”</strong>的道理，发奋读书，最后成为有名的大诗人。</p>“书山有路勤为径，学海无涯苦作舟” 中华民族自强不息的精神，在勤奋读书方面表现得格外突出。不论是善于治国的政治家，还是胸怀韬略的军事家；不论是思维敏捷的思想家，还是智慧超群的科学家，他们之所以在事业上不同凡响，都是与他们从小的远大抱负分不开的。俗话说：“有志者立常志，无志者常立志”，立志，贵在少年。 </p><hr size="1" color="red" width="100%" /></div></body>
</html>
