HTML知识

最新推荐文章于 2022-11-01 16:21:33 发布

hr226

最新推荐文章于 2022-11-01 16:21:33 发布

阅读量129

点赞数

本文链接：https://blog.csdn.net/hr226/article/details/102157383

版权

前端开发：Web Front-end development
后端开发：Web Back-end development

前端开发：
1】开发什么：
结构布局、样式呈现、页面的动态交互：js-脚本、数据交互处理、数据格式化渲染

结构布局	样式呈现	行为逻辑
HTML	CSS	JavaScript

2】<title></title>：文档标题
title标签内的文字一般是30-40个字符，只少不多
如何写title：
主页：网站名称 + 主要的关键字/关键词的描述
详情页：详情名称 + 网站名称 + 简介
列表页：分类名称 + 关键字 + 网站名称
文章页：标题 + 分类 +网站名称

3】<meta name="keywords" content="" />：文档关键词
keywords ：100个字符
网站名称 + 分类信息 + 网站名称

4】<meta name="description" content="" />：网页描述
description 描述信息 80-120个汉字
综合title + keywords的简单描述

5】搜索引擎认知的优先级：title > description > keywords
与物理性标签相比，更喜欢语义性标签(因为可读性、可维护性强、受搜索引擎青睐)

6】中文简体：zh-Hans zh-CHS；中文繁体：zh-Hant zh-CHT
GB2312：中国信息处理国家标准码：简体中文编码
GBK：汉字扩展规范：扩大了汉字收录；增加了繁体中文；增加了藏蒙维等少数民族的文字
UTF-8：Unicode万国码：认识全世界正在使用的所有文字

7】document.compatMode：兼容性模式
有<!DOCTYPE html> // CSS1Compat：w3c 标准兼容性模式
没有<!DOCTYPE html> //BackCompat：浏览器的怪异兼容性模式
8】heading标签：标题标签
独占一行、粗体、大小不一致

8】在编辑器内，文本的空格和换行都是文本分隔符
html实体字符

9】元素
内联元素inline element：不独占一行、无法定义宽高
span、i、em、strong、b、sup、sub、a、label、del、ins
块级元素block element：独占一行、可以定义宽高
p、div、ol、ul、li、dl、dt、dd、form、fieldset、legend、hx、address、table
内联块级元素inline-block element：不独占一行、可以定义宽高
img、iframe、input、select、textarea、button

10】src & href
src：source资源
href：hypertext reference超文本引用

11】<a></a>：anchor 锚点标签
作用：超链接标签、打电话、发邮件、锚点定位、协议限定符-不在跳转或刷新
<a href="javascript:;">123</a> 或 <a href="javascript:void(0);">123</a>

12】标签嵌套
内联元素可以嵌套内联元素和内联块级元素
块级元素可以嵌套任何元素
p标签不可以嵌套div标签
a标签不可以嵌套a标签

13】注释：增加代码可读性，方便后期维护；找bug

14】上下标
sup：superscripted
sub：subscripted

15】ol & ul ：type start reversed
ol：order list有序列表
ul：unorder list无序列表
dl：definition list 自定义列表 -》dt：definition term、dd：definition description

16】table表格
caption标题标签
tr：table row 表格行标签
th：table header cell 表头标签
td：table data cell 单元格标签
cellpadding：单元格内边距
cellspacing：单元格间距

以下三个标签必须同时出现
加载：thead -> tfoot -> tbody
thead：表格页眉标签 table head
tfoot：表格页尾标签 table foot
tbody：表格的主体标签 table body

17】frameset标签不可以放到body标签内
frameset设置框架：现少用或不用因缺陷：数据交互差、加载慢、http请求多、对搜索引擎不友好

延伸出了：
iframe标签内联框架：好处：不需要加载整个页面，只要加载属于它那一部分即可，减少了http请求；功能性导航用它最好；缺点：对搜索引擎不友好；滚动条体系混乱；数据请求无法监控；
frameborder="" scrolling=“yes|no|auto”

18】form表单：用户提交数据：数据名称+数据值
methods=“get|post” //请求方式
action=“url” //提交数据到后端的地址

19】input标签
属性：
readonly只读：不可输入；表单提交数据时可以正常提交
disabled禁用：不可输入；提交数据时不能获取到使用了该属性的input输入框中的值，即表单提交数据时不被提交该数据