<!DOCTYPE html> <!-- 文档头声明 -->
<html> <!-- 根标签 -->
<head>
<meta charset='utf-8' /> <!-- 设置编码格式 -->
<title>网页的名字</title> <!-- 网页的标题 -->
</head>
<body>
<hn align='对齐方式'>标题名字</hn> <!-- 标题双标签，n取值 1-6,字体逐渐减小，
h1网页只允许一个。对齐方式：left、center、right，块级元素。 -->
<p align='对齐方式'></p> <!-- 段落双标签，对齐方式：left、center、right，块级元素，
段落可以通过文本样式双标签font 来控制 face（字体）、size、color。 -->
</body>
</html>观察下列的区别:
区别（去掉最外端的 font 标签）
- 常见的问题：
- ①空格解析问题：
- 标签最前方的 空格 不解析 ，段落中 多个空格或回车 只解析一个，空格和特殊字符 应该用特殊字符标记。
一、网络前端的基本标准（W3C）：
1、html基本结构：
结构HTML，表现美化CSS，JavaScript行为 三个部分。
HTML：超文本标记语言（可以理解为电子书多个书页标签的集合）
2、html标签的分类：
（1）HTML中两大元素：行元素与块元素。
特点：块元素（独占一行），行元素（非独占一行）。
行元素： <img />，<a></a>，<font></font>，文本格式化<strong></strong>
块元素： h1-h6，<p></p>，
特殊： <hr /> <br /> <meta />
结果 ：
（2）单标签与双标签：
单标签： <标签名 属性 />
双标签 <标签名 属性>内容</标签名>
二、HTML的标题、段落、换行、下划线标签（<h1></h1> 、<p></p> 、<br /> 、<hr />） ：
使用方法：①双标签：<标签名属性=“属性值”>内容</标签名> <标签名属性=“属性值”/> 双标签
②单标签：<标签名属性=“属性值” /> 注意： / 不要忘记。
- 知识点： 标题标签 h： <hn align=‘对齐方式’> </ hn> ...（6个）， n取值 1-6 控制字体大小一次减小，h1标签网页只允许用一次。对齐方式：left、center、right；标题标签是 块级元素。
- 段落标签 p： <p align =“对齐方式”> </ p> 段落可以通过文本样式双标签 font 来控制 face（字体）、size、color。对齐方式：left、center、right；块级元素。段落标签尽量不要嵌套，用font写文本。
-
- 换行标签 br： <br />
- 水平线标签 hr: <hr /> 属性： size、 color
（1）上述标签实例：
三、meta（元）的用法（单标签）：
meta的 常见的 属性： charset 设置编码格式 ；keywords 关键字 ； description 详细信息 ....
1、关键字 页面介绍：
例:
2、刷新页面跳转：
- 注意: 跳转到当地文件 与 跳转到 某个网站的区别
例：
<meta http-equiv="refresh" content="3,url=初学_html_简单的css.html" /> <!-- 刷新到当地的当前目录的文件中 -->
<meta http-equiv="refresh" content="3,url=https://www.baidu.com" /> <!-- 加http相当于刷新到指定的网址 -->
<!-- 注意:url包括在content之内, 3 --- 代表 3秒后刷新 url --- 刷新到指定路径(默认是相对路径)或者是某网站的链接,但是必须加http/https -->四、文本样式标签font （双标签）与span 双：行元素
1、 font标签的用法<font 属性=“属性值”> </ font>，非独占一行，用于嵌套标题与段落等标签。
font属性： face（字体）： 楷体、宋体等等。
size（大小）： 1-7 ， 字体从小到大
color： red、green。。
2、span 文本双标签： 与font 用法相似。
<p><span class="red underline">什么是CSS</span><span class="blue underline ital">？一一CSS教程</span></p>
结果：
五、超链接与锚点链接(a标签) ------ 行元素
1、超链接：
（1）超链接 格式：
例：
2、锚链接： href 后 写 #id名
----------》 
3、a标签的伪类：
用法：
超链接:
<a href="https://www.baidu.com" target="_blank">百度</a> ------- 超链接网址
<a href="./按标签/超链接.html" target="_self">百度</a> --------- 链接当地文件
锚点:
<a href="#maodian" target='_self'>这是锚点链接</a>
更改a 标签的 4种状态: ---- 上述截图(a标签有四种状态,其他标签只有hover)
div:hover{cursor:pointer} ---------- 更改 div盒子 鼠标悬浮时为 小手
六、文本格式化标签（双标签）：行元素
例：
七、图片的引入单标签：<img src =“图片URL” alt="" />
单位： px
例1： 
例2： 
- 注意：align 中的 left 与 right 可以使用<p>标签与<img>上下顺序编码；
- 而 top，middle，bottom 必须 直接用 img 标签与 文字直接放在一起（不用p标签）：
1、align =“top”或者“middle”或者“bottom” ：
直接写文字：
2、align =“left”或者“right”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>北风网</title>
</head>
<body>
<!-- align="left" 不需要大框架<p></p>,自上而下。 -->
<img src="./Mine/111.jpg" width="400px" height="300px" hspace="30px" vspace="15px" align="left" alt="加载失败" title="北风网" />
<h1>北风网</h1>
<p>
<a href="http://www.baidu.com">北风网</a>
创建于2008年。网站空间地接客服哈卡尼的付款计划速度快解放南京卡可能付款简单快捷烦恼都看见你发空间啊百度金矿笔记本的骄傲吧就开始科技部的科技分别靠近岸边会计法把科技部分就开始八度空间。
</p>
<p> 水电费还护发空间的哈里发贺卡计划覅科技发代发客户发的可是那份浓浓的你放开单独放开你爱对方考虑那地方拿对方能卡到福利卡的快乐风男卡开发的空间房价的考拉方面考虑你看了单付款了看了看兰蔻能否快速拿到了咖啡能看见俺的减肥达罚款。
</p>
<p> 教育创造美好未来。</p>
</body>
</html>宽度的单位为像素（像素）
八、文本特殊字符：
注意后面的分号 
特殊字符的应用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>特殊字符标记</title>
</head>
<body>
<p>敲空格 真的不管用!<br />使用&nbsp; 可以实现空白字符效果！<br />上一行代码中我们使用了<br>换行标记。<br />©北风网版权所有</p>
</body>
</html>九、link 标签的用法：
C:\Users\Administrator\Desktop\web_预科\css\html11.css 文件：
p{
font-size: 36px; /* css 数据 key与value不加 引号 */
color: red;
text-align: center;
}
例： HTML 中 link 中用法：
<link rel="stylesheet" type="text/css" href="C:\Users\Administrator\Desktop\web_预科\css\html11.css" />
扫一扫
892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
