大学生挑战全网超详细web笔记02弹

3.17第二次web笔记

1.一个基本的HTML5的9行代码结构

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>

分为①父子（嵌套）关系：与

②兄弟（并列）关系：间的关系

2.基本结构里的5对标记的关系图
【根标签，最外层】 ├─ 【头部，不可见】 │ └─ 【标题，必须写在head里】 └─ <body> 【主体，可见内容】 └─ <p> 【段落，写在body里】 <p>具体事例：</p> <p>① <html> </html> ------ 网页根标签（最大容器）</p> <p>② <head> </head> ------ 头部（放标题、编码、样式）</p> <p>③ <title> ------ 网页标题（必须在head里）

④ ------ 主体（所有可见内容）

⑤

------ 段落（最常用正文标签）

3..HTML5、CSS、Javascript文件的规范放置和命名

①HTML5 文件：命名为 index.html （首页），其他页面如 about.html 、 blog.html

-②CSS 文件：放置在 css 文件夹，命名为 style.css （主样式），其他如 layout.css 、 theme.css

-③JavaScript 文件：放置在 js 文件夹，命名为 main.js （主脚本），其他如 utils.js 、 api.js

4..调用样式的三种方法：①当样式设置发生冲突时，就近原则

② 权重大小依次为：行内>内部>外部

①引入外部样式的方法

html 复制代码

<link rel="stylesheet" type="text/css" href="css文件名.css"/>

②内部样式、

html 复制代码

<style type="text/css">
			
</style>

③行内样式

html 复制代码

<h1 style="color: green;">我是标题一</h1>

5.属性和样式的区别

html 复制代码

 <body>
        <!--设置背景颜色为红色 -->
        <h1 style="color:green;">我是标题1</h1>
        <!--用属性控制行内居中 -->
        <h1 align="center">我是用属性控制的标题一</h1>
        <!--用行内样式设置水平居中 -->
        <h1 style="text-align:center;">我是用行内样式设置水平居中</h1>
    </body>

ps：①样式只有style，而属性有很多种

②样式能实现的效果，属性不一定能实现；反过来，属性能实现的，样式一定能实现。

6.主页面变红

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/new_file.css" />
		<title></title>
	</head>
	<body>
		<h1>我是主页面，我变成红色了</h1>
	</body>
</html>

其中在中加入

html 复制代码

<a href="子页面.html">点击进入子页面</a>

新建一个HTML文件，为子页面

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/new_file.css" />
		<title></title>
	</head>
	<body>
		<h1>我是主页面，我变成红色了</h1>
		<a href="子页面.html">点击进入子页面</a>

	</body>
</html>

不忘在css文件夹里面新建一个css文件

html 复制代码

	body{
		background-color: palevioletred;
	}

7.标记的功能

①搭建网页结构

决定网页长什么样、由哪几部分组成（头部、主体、标题、段落等）。

例如：、、、。<br> .②、段落、列表、强调语等不同格式。<br> 例如： <h1> 、 <p> 、 <ul> 、 <li> 、 <strong> 。<br> ③音频、链接等内容放进网页。<br> 例如： <img> 、 <a> 、 <video> 、``。<br> ④. 创建链接与跳转<br> 实现页面之间跳转、链接到外部网站、邮件、电话等。<br> 例如： <a href="..."> 。<br> ⑤ 进行页面布局（容器）<br> 把不同内容块装进不同区域，方便排版。<br> 例如： <div> 、 <span> 、 <header> 、 <footer> 。<br> ⑥ 定义元信息与外部资源<br> 告诉浏览器网页信息（编码、视口、语言），或引入 CSS、图标等。<br> 例如： <meta> 、 <link> 、 <script> 。</p> <p>8.标记的使用方法和注意事项</p> <p>一、使用方法（怎么写） 1. 双标签（成对使用）格式： <标签名> 内容 </标签名> 例： <p>我是段落</p> 、 <h1>标题</h1> 特点：有开始、有结束，内容写中间。 2. 单标签（单独使用）格式： <标签名 /> 或 <标签名> 例： <img src="图片地址" /> 、 <br /> 、 <hr /> 特点：没有结束标签，自己闭合。 3. 嵌套规则（重要） - 标签可以嵌套（大盒子套小盒子）- 必须先开后关、顺序对应错误： <div><p></div></p> 正确： <div><p></p></div></p> <p>二、注意事项（必记，错了就不显示） 1. 标签名必须小写（规范：html、head、body，不能大写）2. 必须用英文尖括号 < > ，不能用中文《》3. 双标签必须成对，不能漏写结束标签 </xxx> 4. 属性写在开始标签里，格式：属性="值" （引号必须英文）5. 不能交叉嵌套（不能你包我、我包你）6. 文件名、路径不能有中文、空格7. 单标签不用写结束标签8. 标签之间可以换行、缩进，不影响效果（为了好看）</p> <p>9.单标签和双标签</p> <p>- ①能装东西的一般是双标签（比如标题、段落、列表、盒子）。</p> <p>- ②单纯占位/引入的一般是单标签（比如图片、换行、元数据）。</p>