01-HTML基本结构及常用标签
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6>
显示为标题样式，字体大小从h1到h6依次变小。 段落标签：
<p>孤落梨花雨，快乐中带着忧伤！</p>
表示一个段落，段落和段落之间有明显的行间距。 换行标签：
<br />
上述代码适用于锚点和超级链接在同一个网页。
<a href="锚点所在网页地址#one">one</a> <a href="锚点所在网页地址#two">two</a>
上述代码适用于锚点和超级链接不在同一个网页。
一、HTML基本结构
<!DOCTYPE html> <html> <head>
<meta charset="utf-8"/> <title>我的第一个网页</title> </head> <body> 我的第一个网页 </body> </html>
解释：
<!DOCTYPE html>:告诉浏览器使用HTML5规范。 <title>我的第一个网页</title>:网页标题，显示在浏览器的标题栏上。 <meta charset="utf-8"/>：设置字符集，uft-8包含全世界所有国家需要用到的字符，当然也包括中 文。 <body>我的第一个网页</body>：网页的主题，浏览者看到的页面显示部分
水平线标签：
<hr />
字体加粗标签：
<strong>陆小曼</strong> <b>林徽因</b>
斜体标签：
<em>陆小曼</em> <i>林徽因</i>
HTML中的注释：
<!--我是单行注释-->
<!-我是多行注释 我是多行注释 -->
HTML中特殊字符：
空格: >: <: '': 版权符号： &符号：
<a href="链接路径" target="目标窗口位置">链接文本或图像</a>
target=“_self” : 默认值，在原始窗口跳转显示新网页。 target=“_blank” : 保留原始窗口内容，在新窗口显示新网页。 （2）电子邮箱链接：
<a href="mailto:*****@163.cn">联系我们</a>
（3）锚链接：
<a href="#one">one</a> 。。。。。。 。。。。。。 <a href="#one">two</a> 。。。。。。 。。。。。。
上述代码为定义锚点的代码，规定了同一个网页的两个位置，如果需要点击超级链接链接到具体位置， 可以将超级链接写法如下：
<a href="#one">one</a> <a href="#two">two</a>
HTML基本结构及常用标签
HTML介绍 （1）HyperText Markup Language。 （2）制作网页前端的技术。 开发工具选择 推荐HBuilder或者HBuilder X作为IDE进行开发，原因不说，用过就知道。安装好开发工具后，选择“文 件”--》“新建”--》“web项目”就可以创建一个HTML项目。在项目上右键--》“新建”--》“HTML文件”就可以 开始编写HTML代码了。
二、HTML常用标签
meta标签：
<meta name=“keywords” content=“关键字1，关键字2" />
设置网页关键字，提供给搜索引擎来进行匹配。
<meta name=“description” content=“网页描述……" />
设置网页描述，提供给搜索引擎搜索页面进行描述信息显示。 标题标签：
> < " © &
图片标签：
<img src="图片路径" alt="提示文本" title="提示文Biblioteka Baidu" width="图片宽度" height="图片高 度" border="图片边框粗细" />
alt:图片无法显示的时候替换图片显示的文本内容。 title:图片正常显示鼠标经过图片时出现的提示文本内容。 超级链接标签： （1）普通超级链接：