WEB前端开发--2（HTML基础）

Posted on 2022-02-12 13:30 鴿阅读(236) 评论(0) 编辑收藏举报

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 标签——属性

上面这句代码中有 src属性和alt属性两个属性。

一个标签可能由多个个属性，属性的先后顺序无关

2.文件

2.1 23文件结构

——————————

<html>

　<head>

　</head>

</html>

——————————

在最外层有一对<html>标签，表示此部分由html来规范

<head> 头部信息：浏览器、搜索引擎所需要信息，会出现在网页标题(标签)栏里

<body> 主体部分：网页中包含的具体内容

2.2 HTML 编辑器

记事本 / Sublime Text3 / Webstorm

2.3 HTML5 的文件结构

——————————————

<!DOCTYPE html>

<head>

</head>

<body>

</html>

—————————————

增加部分：

<!DOCTYOE html> 表示当前文档类型符合HTML5标准

lang 属性：搜索引擎 —— en英文 zh中文

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>这是段落，每个段落自动换行。空格，

也不会显示空行，且不会换行

——————————————

输出：

————————————————————————————

这是段落，每个段落自动换行。

段落内部文字忽略连续空格，也不会显示空行，且不会换行

————————————————————————————

空行和多个连续空格在段落内部都会只生成一个空格

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样式来格式化

——————————————————————————————

span{

　　color : blue;

　　font-wieight : bold;

}

</style>

<p> 最新<span>中国人口调查报告显示</span>显示</p>

——————————————————————————————

3.7 水平线<hr/>

——————————————————————

<hr />

——————————————————————

3.8 注释内容标签 

——————————————————————

<body>

<!-- 注释可以

　　跨行 -->

<body>

——————————————————————

3.9 超链接 <a>

<a href="网址"> 文字或图片 </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="http://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属性、 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 居中

　　<p>JavaScript</p>

</div>

——————————————

3.12 列表

3.12.1 无序列表 <ul> <li>

可以将多个超链接变成列表项，存储为无序列表。

————————————————————————————————

<u1>

</u1>

————————————————————————————————

3.12.2 有序列表 <ol> <li>

例如排行榜，有些地方先后顺序很重要，故采用有序列表

————————————————————————————————

<ol>

</ol>

————————————————————————————————

3.13 表格 table tr td th

以表格的方式呈现信息

table——表 tr——表格行 td——普通单元格 th——表头单元格

————————————————————————————————

　　<tr>

　　　　<td>yellow</td>

　　</tr>

　　<tr>

　　　　<td>green</td>

　　</tr>

</table>

————————————————————————————————

3.14 表单与表单元素

表单：是一个区域，用于采集用户信息

表单元素：文本框、按钮、单选、复选、下拉列表、文本域

3.14.1 表单 <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>

　　爱好：

</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>

——————————————————————

3.14.6 文本域 Textarea

——————————————————————————————————

<form>

　　个人简介：<br >

　　　　在这里输入内容

　　</textarea>

　　<br />

</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>

　　<dd> 超文本标记语言 </dd>

　　<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{段落内容} 生成含内容的段落

刷新页面返回顶部