HTML学习笔记一

最新推荐文章于 2024-09-23 03:39:50 发布

酒千觞

最新推荐文章于 2024-09-23 03:39:50 发布

阅读量237

点赞数

分类专栏： HTML 文章标签： HTML入门笔记

本文链接：https://blog.csdn.net/songAX/article/details/87923699

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

注:
网页主要由3个部分组成：
HTML：结构（Structure）
CSS：表现（Presentation）
JavaScript：行为（Behavior）

HTML（一）

< !DOCTYPE html >：声明 HTML 版本（HTML5）

1.html标签：定义了整个 HTML 文档
< html > …… < /html >
2.head标签：包含了所有的头部标签元素，其中必须包含文档的标题（title），可以包含脚本、样式、meta 信息以及其他更多的信息。(例: < meta > 、< title >)
< head > …… < /head >
例:

<html>
	<head>
	……
	</head>
</html>

3.body标签：定义文档的主体，包含文档的所有内容（即网页可见的页面内容）（比如文本、超链接、图像、表格和列表等等）（例: < p >）
html基本结构:

<html>
	<head>
	</head>
	<body>
	</body>
</html>

4.meta标签：
< meta > 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
< meta > 标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。
在 HTML 中，< meta > 标签没有结束标签。即没有< /meta >
对于中文网页需要使用 < meta charset=“utf-8” > 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 < meta charset=“gbk” >。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
为搜索引擎定义关键词:< meta name=“keywords” content=“HTML, CSS, XML, XHTML, JavaScript” >
为网页定义描述内容:< meta name=“description” content=“Free Web tutorials on HTML and CSS” >
定义网页作者:< meta name=“author” content=“Hege Refsnes” >每30秒钟刷新当前页面:< meta http-equiv=“refresh” content=“30” >
5.title标签：定义了 HTML 文档的标题

6.p标签：定义段落

7.h标签：定义标题，h1 是主标题，h2 是副标题，h3、h4、h5、h6 依次递减字体的大小。最多只能到h6标签
h标签可以有id、name等属性
例: < h2 id=“h2title” >这是二级标题< /h2 >

8.a标签：定义链接，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。
< a >标签含有 href 属性，可在 href 属性中指定链接的地址，这个地址可以是一个网址，也可以是一个html文件。
例:< a href=“http://www.w3cschool.cn “>这是一个标签< /a >
< a href=”#”>跳转到页面顶部< /a >
< a href="#h2title">跳转到二级标题< /a >
默认的被链接文档会在原有的窗口中打开的（由原网页跳转到新的网页）。如果将 target 属性设置为 “_blank” 则文档就会在新窗口打开（新打开一个网页）
例：< a href="//www.w3cschool.cn/" target="_blank">访问W3CSchool教程!< /a >
< a href=“http://www.w3cschool.cn/” style=“text-decoration:none;”>访问 w3cschool.cn!< /a >使用 style 属性制作一个没有下划线的链接。
9.img标签: 图像标签，使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址，图像的名称和尺寸是以属性的形式提供的，且img元素是自关闭元素，不需要结束标记。(空标签，只包含属性而没有闭合标签)
例：
< img src=“image/noimage.jpg” width=“104” height=“142” alt=“没有此图片” > alt属性定义图片加载失败时显示的文字。
绝对地址和相对地址:
“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ …/ ” 表示当前文件所在目录下的上一级目录，比如：“…/images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
10.hr标签：在 HTML 页面中创建水平线，可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分(用法：< hr >或者< hr/>,hr是一个空元素)。
默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后
11.注释：< !-- 这是一个注释 – >
12.br标签：< br / >或用< br >，它可以理解为简单的输入一个空行，而不是用来对内容进行分段
13.pre标签: 定义预格式文本,使得显示的格式与代码书写格式一致，为了克服默认的会合并空格和空行
14.base标签：描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接
例: 在head中加入：
< base href=“http://www.w3cschool.cn/statics/images/w3c/” target="_blank" >
则在body中< img src=“logo.png” > - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 “http://www.w3cschool.cn/statics/images/w3c/logo.png "
< a href=“http://www.w3cschool.cn” >W3Cschool教程 - 注意这个链接会在新窗口打开，即便它没有 target=”_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 “_blank”。
15.style标签：可以指定样式文件来渲染HTML文档
例: 可指定页面背景颜色和段落文字颜色

<head>        
<style type="text/css">        
body {background-color:yellow}        
p {color:blue}        
</style>        
</head>

16.script标签：用于加载脚本文件，如： JavaScript。
17.link标签: 链接到一个外部样式表(放在head中)。
例: < link rel=“stylesheet” type=“text/css” href="/statics/demosource/styles.css" >