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

损注 · 2 小时前

3.17第二次web笔记
1.一个基本的HTML5的9行代码结构

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

复制代码

分为①父子（嵌套）关系：与
②兄弟（并列）关系：间的关系
2.基本结构里的5对标记的关系图
【根标签，最外层】├─ 【头部，不可见】 │ └─ 【标题，必须写在head里】└─ 【主体，可见内容】 └─
【段落，写在body里】具体事例：
① —— 网页根标签（最大容器）
② —— 头部（放标题、编码、样式）

③ —— 网页标题（必须在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..调用样式的三种方法：①当样式设置发生冲突时，就近原则
                                    ② 权重大小依次为：行内>内部>外部
①引入外部样式的方法

[/code]②内部样式、
[code]

复制代码

③行内样式

<h1 >我是标题一</h1>

复制代码

5.属性和样式的区别

<body>
<h1 >我是标题1</h1>
<h1 align="center">我是用属性控制的标题一</h1>
<h1 >我是用行内样式设置水平居中</h1>
</body>

复制代码

ps：①样式只有style，而属性有很多种
②样式能实现的效果，属性不一定能实现；反过来，属性能实现的，样式一定能实现。
6.主页面变红

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html> [size=6]我是主页面，我变成红色了[/size]

复制代码

其中在中加入

点击进入子页面

复制代码

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html> [size=6]我是主页面，我变成红色了[/size]
点击进入子页面

复制代码

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

body{
background-color: palevioletred;
}

复制代码

7.标记的功能
①搭建网页结构
决定网页长什么样、由哪几部分组成（头部、主体、标题、段落等）。
例如：  、  、  、  。
.②、段落、列表、强调语等不同格式。
例如：、  、 <ul> 、  、 <strong> 。
③音频、链接等内容放进网页。
例如： <img> 、  、  、``。
④. 创建链接与跳转
实现页面之间跳转、链接到外部网站、邮件、电话等。
例如：  。
⑤ 进行页面布局（容器）
把不同内容块装进不同区域，方便排版。
例如：  、  、  、  。
⑥ 定义元信息与外部资源
告诉浏览器网页信息（编码、视口、语言），或引入 CSS、图标等。
例如：  、  、 <script> 。
8.标记的使用方法和注意事项
一、使用方法（怎么写） 1. 双标签（成对使用）格式：  内容  例：我是段落
、标题

特点：有开始、有结束，内容写中间。 2. 单标签（单独使用）格式：或例：

、
、

特点：没有结束标签，自己闭合。 3. 嵌套规则（重要） - 标签可以嵌套（大盒子套小盒子）- 必须先开后关、顺序对应错误：
正确：

二、注意事项（必记，错了就不显示） 1. 标签名必须小写（规范：html、head、body，不能大写）2. 必须用英文尖括号 < > ，不能用中文《》3. 双标签必须成对，不能漏写结束标签 4. 属性写在开始标签里，格式：属性="值" （引号必须英文）5. 不能交叉嵌套（不能你包我、我包你）6. 文件名、路径不能有中文、空格7. 单标签不用写结束标签8. 标签之间可以换行、缩进，不影响效果（为了好看）
9.单标签和双标签
- ①能装东西的一般是双标签（比如标题、段落、列表、盒子）。
- ②单纯占位/引入的一般是单标签（比如图片、换行、元数据）。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册