WEB前端开发–2（HTML基础）
- 2022 年 2 月 12 日
- 筆記
HTML基础
HTML不分大小写
1.HTML概述
HTML(HyperText MarkUp Language)“超文本标记语言”，他是制作网页的标准语言
1.1 标签——元素
由尖括号包围，比如<title>，通常是成对出现
例如：<title> 百度一下，你就知道 </title>
开始标签 内容 结束标签
单独出现的标签：<img /> 图片标签单独出现
1.2 标签——嵌套
<html><body></body></html> ——正确
<html><body></html></body> ——错误
HTML语言中规定标签一定得有正确的嵌套关系，且要注意缩进，类似python。
标签嵌套关系可以用HTML DOM树表示.
1.3 标签——属性
<img src=”logo.jpg” alt=”站标” />
上面这句代码中有 src属性和alt属性两个属性。
一个标签可能由多个个属性，属性的先后顺序无关
2.文件
2.1 23文件结构
——————————
<html>
<head>
<title></title>
</head>
</html>
——————————
在最外层有一对<html>标签，表示此部分由html来规范
<head> 头部信息：浏览器、搜索引擎所需要信息，会出现在网页标题(标签)栏里
<body> 主体部分：网页中包含的具体内容
2.2 HTML 编辑器
记事本 / Sublime Text3 / Webstorm
2.3 HTML5 的文件结构
——————————————
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> </title>
</head>
<body>
<body>
</html>
—————————————
增加部分：
<!DOCTYOE html> 表示当前文档类型符合HTML5标准
lang 属性：搜索引擎 —— en英文 zh中文
<meta> ：元数据（作者，关键字等等数据）
charset属性：字符集编码方式——浏览器UTF-8是国际编码
2.4 字符集与编码
字符(Character): 文字、符号——123 abc 一二三 !?$#
字符集(Charset): 字符的集合——英文字符集、汉字字符集、日文汉字字符集
编码：将字符和二进制码对应起来
编码方式： ASCII：数字、英文字母、符号进行了编码
GB2312：简体中文
Unicode：所有语言、占用空间较大
UTF-8：所有语言、占用空间较小
2.5 乱码问题
源文件保存时编码与源文件声明<meata charset=”编码方式”>不一致就会出现乱码问题
3.HTML标签
3.1 标题标签h1~h6 一个页面建议只有一个h1
——————————————
<h1>一级标题 heading 1</h1>
<h2>二级标题 heading 2</h2>
<h3>三级标题 heading 3</h3>
<h4>四级标题 heading 4</h4>
<h5>五级标题 heading 5</h5>
<h6>六级标题 heading 6</h6>
这里是正文文字
——————————————
3.2 段落p
——————————————
<p>这是段落，每个段落自动换行。</p>
<p>这是段落，每个段落自动换行。</p>
<p>这是段落，每个段落自动换行。 空格，
也不会显示空行， 且不会换行
——————————————
输出：
————————————————————————————
这是段落，每个段落自动换行。
这是段落，每个段落自动换行。
段落内部文字忽略连续 空格， 也不会显示空行，且不会换行
————————————————————————————
空行和多个连续空格在段落内部都会只生成一个空格
3.3 段内换行 <br/>
<br/> 为单独出现的标签，直接结束
读到<br/>标签自动换行，类似于\n
3.4 空格字符
为特殊字符，全小写
——————————————————————————————
<body>
<p>段落内部文字忽略连续 空格，
<br/>
也不会显示空行，且不会换行
</p>
</body>
——————————————————————————————
输出：
——————————————————————————————
段落内部文字忽略连续 空格，
也不会显示空行，且不会换行
——————————————————————————————
3.5 预留格式pre
定义预格式化的文本，在pre标签内部，所有内容都会被保留源格式。
——————————————————————————————
<body>
<pre>
这是预留格式文本 它保留了 空格
和空行
</pre>
<p>pre 标签很适合显示计算机代码 </p>
<pre>
for i=1 to 10
print i
next i
</pre>
<body>
——————————————————————————————
3.6 行内组合span
组合行内元素，以便通过CSS样式来格式化
——————————————————————————————
<style type=”text/css”>
span{
color : blue;
font-wieight : bold;
}
</style>
<p> 最新<span>中国人口调查报告显示</span>显示</p>
——————————————————————————————
3.7 水平线<hr/>
——————————————————————
<p>正文段落</p>
<hr />
<p>正文段落</p>
——————————————————————
3.8 注释内容标签 <!– 注释内容 –>
——————————————————————
<body>
<!– 这是一段注释–>
<!– 注释可以
跨行 –>
</
<body>
——————————————————————
3.9 超链接 <a>
<a href=”网址”> 文字或图片 </a>
分类：
链接到本站点的其他网页：
<a href=”news.html”> 新闻 </a>
链接到其他站点的网页：
<a href=”//www.baidu.com”> 百度 </a>
虚拟超链接：
<a href=’#’> 板块2 </a> ——还没设置好超链接时用虚拟超链接替代
举例：
【index.html】
——————————————————————————
<!DOCTYPE html>
<html lang=’en’>
<head>
<meta charset=’UTF-8′>
<title>Doucment</title>
</head>
<body>
<h1>首页</h1>
<h2>导航</h2>
<a href=”news.html”> 新闻 </a>
<a href=”technology.html”> 科技 </a>
<a href=”//www.baidu.com”> 问问百度 </a>
</body>
</html>
————————————————————————————
【news.html】
———————————————————————————————
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title> 新闻 </title>
</head>
<body>
<h1> 新闻板块 </h1>
<p><a href=”#”>五年来###这样论述”一带一路”</a></p>
<p><a href=”#”>关于中非合作 ###这些提法有深意</a></p>
<p><a href=”#”>专家学者高度评价###提出的”五不””四不能”</a></p>
<p><a href=”#”>###将赴俄出席东方经济论坛并与普京会晤</a></p>
<p><a href=”#”>人命日报：让能干事者有舞台 中国方案 专题</a></p>
<p><a href=”#”>中国人当心 又来了两则中美贸易战的宣言</a></p>
</body>
</html>
————————————————————————————————
【technology.html】
—————————————————————————————————————
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title> 科技 </title>
</head>
<body>
<h1> 科技板块 </h1>
<p><a href=”#”>颜宁课题组70天里发3篇Sciense</a></p>
<p><a href=”#”>不良反应≠疫苗一定有问题</a></p>
<p><a href=”#”>自如事件：无限放大的甲醛恐慌</a></p>
<p><a href=”#”>超越基因的遗传： 你遗传给后代的也许不只是基因信息</a></p>
<p><a href=”#”>科学大家 |如何治愈癌症：个性化精准医疗将发挥大作用</a></p>
<p><a href=”#”>美国无人太空飞机执行第五次任务已一年 目的仍未知</a></p>
</body>
</html>
——————————————————————————————————————
3.10 图像
3.10.1 图像格式
常见图像格式有：JPG，PNG，GIF
JPG：有损压缩的图像格式，支持色彩丰富的图片
GIF ：简单动画背景透明
PNG: 无损压缩，透明、交错、动画
3.10.2 插图图像 <img />
<img src=”w3school.gif”>
img标签有两个重要属性：src属性 、 alt属性
src属性：图像路径+文件名
alt属性：当图像由于某种原因未打开时，图像的替换文本
3.10.3 绝对路径与相对路径
绝对路径：以根目录为基准<img src=”C:/site/logo.gif” />
相对路径：以该文档所在位置为基准<img src=”logo.gif” />
同级文件夹中：<img src=”images/logo.gif” />
上级文件夹中：<img src=”../logo.gif” />
3.11 区域div
——————————————
<div align=”center”> # align=center 居中
<h1>web 前端开发</h1>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</div>
——————————————
3.12 列表
3.12.1 无序列表 <ul> <li>
可以将多个超链接变成列表项，存储为无序列表。
————————————————————————————————
<h1>Web 前端开发</h1>
<u1>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</u1>
————————————————————————————————
3.12.2 有序列表 <ol> <li>
例如排行榜，有些地方先后顺序很重要，故采用有序列表
————————————————————————————————
<h1>web 前端开发</h1>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
————————————————————————————————
3.13 表格 table tr td th
以表格的方式呈现信息
table——表 tr——表格行 td——普通单元格 th——表头单元格
————————————————————————————————
<table border=”1″>
<tr>
<td>red</td>
<td>yellow</td>
</tr>
<tr>
<td>blue</td>
<td>green</td>
</tr>
</table>
————————————————————————————————
3.14 表单与表单元素
表单：是一个区域，用于采集用户信息
表单元素：文本框、按钮、单选、复选、下拉列表、文本域
3.14.1 表单 <form>
action属性：表示收集来的数据交于哪个网页处理（后端范畴）
————————————
<form action=”数据处理网页”>
表单元素
</form>
————————————
3.14.2 文本框、密码框input
text与password的区别： text明文显示，password则是用星号显示
name属性为信息地址
——————————————————————————————
<form>
账户：<input type=”text” name=”userName” />
<br />
密码：<input typy=”password” name=”userPsd” />
</form>
——————————————————————————————
3.14.3 按钮 input——
按钮：提交按钮、重置按钮
type：提交按钮——submit 重置按钮——reset
value：按钮表面的文字
——————————————————————————
<form>
爱好：
<input type=”text”>
<input type=”submit” value=”确定” />
<input tyoe=“reset” value=“重置” />
</form>
——————————————————————————
3.14.4 单选框、复选框input——radio checkbox
单选框：只能选则一项 复选框：任意选择多项
type：单选框——eadio 复选框——checkbox
value：表示要提交到后端的数据
name：当前这一项的名称（单选框name值相同，复选框name值不同）
checkd：当前这一项是否被默认选择，一般为第一项
——————————————————————————————————
<form>
性别：
男 <input type=”radio” value=”boy” name=”gender” checkd=”checked” />
女 <input type=”radio” value=”girl” name=”gender” />
<br />
爱好：
<input type=”checkbox” value=”1″ name=”music” checkd=”checked” /> 音乐
<input type=”checkbox” value=”2″ name=”sport” /> 体育
<input type=”checkbox” value=”3″ name=”reading” /> 阅读
</form>
——————————————————————————————————
3.14.5 下拉列表框 selected option
selected=”selected” 即为被选择的一项
——————————————————————
<select>
<option> 选项1 </option>
<option selected=”selected”> 选项2 </option>
</select>
——————————————————————
3.14.6 文本域 Textarea
<textarea rows=”行数” cols=“列数”> 文本 </textarea>
——————————————————————————————————
<form>
个人简介：<br >
<textarea cols=”50″ rows=”10″>
在这里输入内容
</textarea>
<br />
<input type=”submit” value=”确定” />
<input tyoe=“reset” value=“重置” />
</form>
——————————————————————————————————
4. web语义化
4.1 概述
Web语义化：让页面具有更好的结构与含义，从而让人和机器都能快速理解网页内容
优点：1.结构清晰，利于团队的开发、维护
2.有利于搜索引擎理解
3.SEO(Search Engine Optimization) 搜索引擎优化
4.容易兼容不同设备。
4.2 em strong 均成对使用
<em> = <i>: emphasize 斜体
<strong> = <b>：strong 加粗
4.3 dl，dt，dd
————————————————
<dl>
<dt>HTML</dt>
<dd> 超文本标记语言 </dd>
<dt>CSS<dt>
<dd>层叠样式表</dt>
</dl>
————————————————
输出：
————————————————
HTML
超文本标记语言
CSS
层叠样式表
————————————————
5. sublime 快捷键
alt+shift+2 分成两屏
alt+shift+1 回到单屏
ctrl+s 保存
ctrl+/ 注释
ctrl+shift+/ 取消注释
按下ctrl单击多处，可以多处同时编辑
配合Tab快捷键：
！ HTML5文件结构
p*4 四个段落
> 嵌套
ul>li*n 快速生成无序列表
table>tr*m>td*n 生成m*n的表格
p{段落内容} 生成含内容的段落
