31
社区成员
发帖
与我相关
我的任务
分享HTML 基础知识摘要
1.标签分类
- 双标签
<marquee>xxx < /marquee> - 单标签
<input/> /可省略 - 标签嵌套
<marquee> <input> </marquee>
2.html标签属性
- 用于给标签提供附加信息
- 可以写在起始标签或单标签中
<标签名 属性名=“属性值” 属性名=“属性值”> e.g.<marquee loop="1" bgcolor="green">html study</marquee> <input type="password"> /中间都有空格 - 特殊无属性名
<input disabled> - 注意
1.不同标签有不同属性，也有相同属性(通用属性)
2.属性名和属性值按照W3C标准
3.属性名属性值不区分大小写，但推荐小写
4.双引号可以写成单引号或者不写，但推荐写双引号
5.标签中不要出现同名属性，否者后写的失效
3.html基本结构
<html>
<head></head>
<body>
xxxxxx(这里放内容)
</body>
</html>
<head></head>里的内容不展示 <title></title>指定页签名<body></body>里的内容会展示- 注意：
1.【检查】是浏览器处理后的源代码
2.【查看页面源代码】是程序员写的代码
4.html注释
<!-- 现在的内容不会出现在页面上 -->
<!-- 注释的内容可以换行
你看 -->
<!--注释不可以嵌套
中间应该有空格，但是也可以不写-->
<!--<input>标签也可以注释-->
快捷键control+/ 加入注释，鼠标放在该行即可
快捷键control+z 撤销注释
5.声明html的标准
<!DOCTYPE html>
<!--H5标准声明，最简短-->
告诉浏览器当前网页的版本
文档声明必须写在第一行
6.html字符编码
<head>
<meta charest="UTF-8">
<!--声明浏览器解码标准-->
</head>
<!--因为vscode默认编码方式就是UTF-8，要想文件有效，需要保证编码解码放式一致-->
7.html设置语言
<html lang="en">
<!--声明浏览器页签语言
主要作用：
1.让浏览器显示对应的翻译提示
2.有利于搜索引擎的优化
en-US
en-GB
zh-CN
zh-TW
zh
zh-Hans 中文简体
zh-Hant 中文繁体
control+shift+k 快速删除所在行-->
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>标题</标题> </head> <body> </body> </html>- 注意：
1.VScode内置的插件Emmet中何以对生成结构的属性进行定制
2.存放代码的文件夹中，存放一个favicon.ico图片，可以配置网站图标
开发者文档：
1.http://www.w3c.org/
2.http://www.w3school.com.cn/
3.developer.mozilla.org(最常用)
8.html排版标签
- 页面内标签
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>html title</title> </head> <body> <h1></h1> <h2></h2> </body> </html> <!--<h2>标签可写至<h6>,说明最多有六个页面内标题，在页面内自动加粗，自动排版大小。<h1>大标题只能有一个 h标签也不允许相互嵌套--> - 段落标签
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>html title</title> </head> <body> <h1></h1> <h2></h2> <div> <p></p> <p></p> </div> </body> </html> <!--一般都把段落标签<p>写在<div>标签中 <p>标签不允许嵌套，h,div,p都不允许-->
9.html语义化标签
- 标签默认的效果不重要，语义最重要
- 好处：
1.代码的可读性强，清晰
2.有利于SEO（搜索引擎优化）
3.方便设备解析（盲人阅读器，屏幕阅读器）
10.块级元素和行内元素
- 块级元素
- 行内元素
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>html title</title> </head> <body> <h1></h1> <h2></h2> <!--块级元素独占一行--> <input tpye="text"> <!--行内元素只占行的一块区域--> </body> </html>
1.块级元素中能写：行内元素，块级元素，几乎什么都能写 h1
2.行内元素中能写：行内元素，但不能写块级元素 span，input
3.特殊规则：p标签中不能写块元素 p,div,h
11.常用文本标签
- 用于包裹：词汇，短语等
- 通常写在排版标签内
- 排版标签更宏观（大段的文字），文本标签更微观（词汇，短语）
- 文本标签通常都是行内元素
常用的：
1.着重要阅读的内容,双
2.十分重要的内容，语气更强,双
3.没有语义，用于包裹短语的通用容器,双
12.不常用的文本标签
- 以下均为双标签
- 作品标题（书记，歌曲，电影节目）
- 特殊术语，或专属名词
- 删除文本与插入的文本
- 下标文字与上标文字 h2o 8的三次方
- 一段代码
- 从正常的上下文中，将某些内容提取出来，例如标识设备输出
- 键盘文本
- 缩写
- 更改文本方向,配合rtl,ltr使用
- 标记变量
13.html图片标签
- 行内元素
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>标题</标题> </head> <body> <img src="图片路径" alt="图片描述" width="图片宽度" height="图片高度"> </body> </html> <!--图片路径需要按照使用方式，html页面内的图片和html源文件同级，html页面的网页图标和VS打开的文件夹同级>14.相对路径，绝对路径
相对路径：
- ./代表当前位置---一个.代表当前文件同级目录
- ../代表更高一层文件目录，更大的文件夹里的文件 e.g. ../../../xxx.jpg
- 以此类推
绝对路径：
- 本地绝对路径：
e.g.E:/html_practice/照.png(基本不使用) - 网络绝对路径：
e.g.网页上复制的图片路径，可能因为防盗不可用
15.常见的文件格式
- .jpg--有损压缩，不支持动态图
- .png--无损压缩，不支持动态图
- .bmp--不进行压缩，不支持透明背景，不支持动态图
- .gif--支持简单的透明背景，支持动态图
- .webp--兼具优点，但是兼容性不太好
- base64--把图片转码成文本
16.超链接
- 超文本的真正含义：是一种组织信息的方式，通过超链接将不同空间的文字，图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容（内容包含页面，文字，图片等）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>html title</title>
</head>
<body>
<a href="链接" target="_blank" >链接名</a>
<!--"_blank"在新网页打开
target="_self" 在本网页打开-->
</body>
</html>
<!--超链接的主要作用：从当前页面进行跳转
双标签<a href：要跳转的具体位置；
target：_self：从本页签中打开；
_blank：从新页签打开->
- 超链接跳转文件：
<a href="链接" download="name"(optioanl)>链接名<a> - 超链接跳转锚点：
1.a标签：
<a href="#要跳转的标签名">连接名<a>
<a name="要跳转的标签名"><a>
<img src="链接" alt="图片描述">
区分大小写，最好不重复
2.id（通用标签）
<a href="#id">链接名<a>
<p id="id">段落内容<p>
<img src="跳转地址" alt="图片描述">
注意：
1.id最好不要以数字开头
2.标签的特殊用法：回到开头
<a href="#">回到顶部<a>
<a href="">刷新页面<a>
3.跳转到其他页面的锚点：
<a href="demo.html#id">去demo.html页面的id锚点<a>
4.执行一段js，如果不知道要执行什么，可以留空
<a href="javascript:此处写js脚本;">链接名<a>
- 唤起指定应用：
<a href="tel:xxx号码">电话联系<a> <a href="mailto:xxx@xxx.com">邮件联系<a> <a href="sms:xxx">唤起设备发送短息<a>
17.html列表
有序列表 ordered list ol
列表项 list item li<body> <ol> <li> <li> </ol> </body>无序列表 unordered list ul
自定义列表 definition list dl
术语标题 definition title dt
术语内容 definition description dd注意事项
1.列表内保证子元素都是li,可嵌套
2.li尽量不要单独使用
3.列表是可以嵌套的
18.html表格 table
- 表格标题 caption
- 表格头部 thead 也就是第一行
- 表格主体 tbody
- 表格脚注（可不写）tfoot 也就是最后一行
- 行 tr row
- th table header 表头单元格
- td table data 单元格（普通内容
- ）
- 注意：
1.table表签可以有border：边框，后面的值指的是边框的宽度
2.边框宽度大于一的时候，只控制最外层的宽度，单元格的边框宽度仍然是1
3.table标签可以有width，height属性，根据表头字数多少来分配宽度，但后期可以调整，改长宽只变动内容格的大小
4.table中 cell spacing表示边框之间的距离
5.thead的属性是height，align，valign
6.align用来控制表格文字的水平对齐方式，center，left，right
7.valign控制竖直对齐方式，middle，bottom，top
8.tbody和tfoot的属性同thead
- 注意：
1.表格其中的列用column，col表示，colspan跨列
- 常用标签：
1.换行标签：br单标签
2.分割线标签：hr单标签
3.按原文显示：pre 双表签，一般用于在网页中嵌入大段代码
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
~
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
~
</tr>
<tr>
<td></td>
<td></td>
<td></td>
~
</tr>
<tr>
<td></td>
<td></td>
<td></td>
~
</tr>
~
</tbody>
</table>
19.html表单
- form
- 表单控件
- action：将表单交给谁处理，网址后/s，表示search,由访问的网页决定
- input：属性name：wd是百度的规定；type默认值为text，还可以使用password，radio表示单项选择，name选择gender，value分别写作male，female即可选择；type属性为checkbox表示复选框；value值是控制输入框的默认值，maxlength输入框的最大值
- 单选框和复选框一定要有value值
- 隐藏域：input type=hidden name=“tag”（需沟通） value=“xxx”
- 确认按钮：
1.button type=“submit”确认 button，属性可以不写，确认是默认值
2.input type=“submit” value=“确认”，此时没有name属性，value值就是按钮名
3.默认选项在input内写checked
<button type="submit">确认</button>
<input type="submit" value="确认">
- 重置按钮：
1.button type=“reset” 重置 button，需要写属性
2.input type=“reset” value=“重置”，value控制的是按钮里的文字
<button type="reset">重置</button>
<input type="reset" value="重置">
- 普通按钮（不引起提交和重置的按钮）
1.button type=“button” 检测账户是否被注册 button
2.input type=“button” value=“检测账户是否被注册”
<button type="button">检查账户是否被注册</button>
<input type="button" value="检查账户是否被注册">
- 文本域：
textarea name=“other” cols=“10” rows="5" textarea<textarea name="place" cols="列数" rows="行数"><textarea> - 下拉框
select name="place"
option xxx option
option xxx option
select
标准写法：
select name=“place ”option value=“xx” xxx option select<select name="place"> <option value="xxx" (selected)>xxx</option> </select> - 禁用表单控件：
1.disabled 在标签 内直接写
2.可以写在input textarea button select option
- label标签
1.实现获取焦点
2.label for="zhanghu" 账户 label
input id="zhanghu" type="text" name="account" maxlength="10"
此处for和id属性对应
3.或者直接将input标签包裹在label标签内，此时没有for
1.
<label for="zhanghu">账户</label>
<input id="zhanghu" type="text" name="account" maxlength="10">
2.
<label>
<input type="text" name="account" maxlength="10">
</label>
- ieldset和legend：
实现标签的分类
fieldset
legend xxx legend(分组标题)
xxx(需要分组的标签全部写在legend下方)
fieldset
<fieldset>
<legend>xxx</legend>
xxxx
</fieldset>
20.框架标签
iframe src="链接" width=“宽” length=“高” iframe
- 利用iframe嵌入一个普通网页
- iframe border 网页边框宽度
- 利用iframe嵌入其他内容：
浏览器可以打开的均可以嵌入
- target属性
target=“tt” --在名字是tt的内嵌窗口里打开，配合超链接或者表单使用
<a href="xx" target="a">xxxx</a>
<iframe name="a" width="xx" height="xx"></iframe>
也可以和表单链接
<a href="xx" target="a">xxxx</a>
<form action="https://xxx" target="a">
<input type="text" name="keyword">
<input type="submit" value="搜索">
</form>
21.html字符实体
-  ；---表示一个空格，浏览器可以识别，可以不写双标签pre，来表示文本中的空格
-  ；---也是表示一个空格
- <；---小于号
- >；---大于号
- &；---表示&
- ￥中文的shift+4
- ¥---￥
- ©；----©版权所有
- ×---乘号
- ÷---除号
22.html全局属性
- id
1.给标签指定唯一标识，在一个html里不能重复
2.作用：可以让label标签与表单控件相关联；也可以与css，JavaScript配合使用
3.注意，不能在以下标签中使用：html,head,meta,script,style,title
- class
1.给标签指定类名，随后通过css可以给标签设置样式
- style
1.给标签设置css样式
- dir
1.内容的方向：rtl，ltr
2..注意，不能在以下标签中使用：html,head,meta,script,style,title
3.不同标签中的含义不同
- title
1.给标签设置一个文字提示，一般超链接和图片用的比较多
- lang
1.给标签指定语言，具体规范参考设置语言mdn
2..注意，不能在以下标签中使用：html,head,meta,script,style,title
23.html的meta元信息
- 写在head双标签内
- 配置字符编码
- meta charset="UTF-8"
- 兼容性设置
- meta http-equiv="X-UA-Compatible" content="IE=edge"（真对IE浏览器的兼容性设置）
- 针对移动端设备的配置
- meta name=“viewport” content="width=device-width,initial-scale=1.0"
- 配置网页关键字
- meta name="keywords" content="网上购物，电商购物，化妆品"
- 配置网页描述信息
- meta name="description" content="搜索引擎是用来搜索的"
- 针对搜索引擎爬虫设置
- meta name="robots" content=""
可选值如下： - index：允许搜索爬虫索引此界面
- noindex：要求搜索爬虫不索引此界面
- follow：允许搜索爬虫跟随此页面上的链接
- nofollow：要求搜索爬虫不跟随此页面上的链接
- all：与index，follow等价
- none：与noindex，nofollow等价
- noarchive:要求搜索引擎不缓存页面内容
- nocache：noarchive的替代名称
- 配置网页作者
- 配置网页生成工具
- 配置定义网页授权信息
- 配置网页自动刷新
- meta http-equiv="refresh" content="10;url=http://www.baidu.com"/
- mdn网页见详细说明
...全文
请发表友善的回复…
发表回复
