HTML 基础【快速掌握知识点】-阿里云开发者社区

HTML 基础【快速掌握知识点】

2023-03-01 97

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： HTML 基础【快速掌握知识点】

一、什么是HTML？

HTML是超文本标记语言，超文本标记语言包括文字、图片、音频、视频、动画等。

二、HTML的发展史

三、HTML5的优势

世界知名浏览器厂商对HTML5的支持、微软、Google、苹果、市场的需求等

四、HTML基本结构

1. <html>
2. <!--网页头部-->
3. <head>
4. <title>我的第一个网页</title>
5. </head>
6. <!--主体部分-->
7. <body>
8.     我的第一个网页
9. </body>
10. </html>

五、DOCTYPE声明

1. <!DOCTYPE html>
2. <!--html告诉浏览器使用什么规范-->
3. <html>
4. <head lang="en">
5. <meta charset="utf-8"/>
6. <title>新建标签页</title>
7. </head>
8. <body>
9. 
10. </body>
11. </html>

六、title标签

七、meta标签

utf-8 则包含全世界所有国家需要用到的字符，页面编码应与页面文件保存时的编码一致

八、标题标签

九、段落标签

<p>有勇气就会有奇迹</p>

十、换行标签

1. <p>
2.     有勇气!<br/>有奇迹!<br/>....
3. </p>

十一、水平线标签

1. <p>
2.     有勇气!<br/><hr/>有奇迹!<br/><hr/>....
3. </p>

十二、字体样式标签

加粗：<strong>…</strong>

斜体：<em>…</em>

1. <p>
2. <strong><em>有勇气,有奇迹!</em></strong>
3. </p>

十三、特殊符号

特殊符号	字符实体	示例
空格		百度新浪
大于号(>)	>	如果时间>晚上6点，就坐车回家
小于号(<)	<	如果时间<早上7点，就走路去上学
引号(")	"	HTML的属性值必须用成对的"引起来
版权符号@	©	© 百度

十四、图像标签

常见的图像格式：JPG、GIF、PNG、BMP

<img src="path" alt="text" title="text"  width="x"  height="y" />

十五、链接标签

<a href="path" target="目标窗口位置">链接文本或图像</a>

十六、锚链接

从A页面的甲位置跳转到本页中的乙位置

从A页面的甲位置跳转到B页面中的乙位置

1、创建跳转标记

<a name="marker">乙位置</a>

2、创建跳转链接

<a href="#marker">甲位置</a>

十七、邮件链接

<a href="mailto:.....@gmail.com">联系我们</a>

十八、行内元素和块元素

块元素

无论内容多少，该元素独占一行（p、h1-h6…）

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)