2021-3-1 17:12:29 | 作者：老铁SEO | 0个评论 | 人浏览
1.HTML概述
1.HTML：超文本标记语言。是一种标识性语言，非编程语言，不能使用逻辑运算。通过标签将网络上的文档格式进行统一，使分散的网络资源链接为一个逻辑整体。
超文本是一种组织信息的方式，通过超级链接将多种媒介链接起来
标记：标签。用《》包裹的具有一定含义的内容，比如：…
静态网页：不变
动态网页：跟后台同时改变
2.HTML标签结构
1.文档结构：
《！doctype html》《！--！表示声明的意思。这一行代码意思：下面的文档标签将以html5进行解析--》
《html》
《！-头部。用来完成一个网页的相关设置-》
《head》
《meta charset=“utf-8”》《！--汉字编码--》《！--meta：元，用来完成对应设置--》
《meta name=“keywords” content=“”》《！--设置一个网站搜索的关键字--》
《meta name=“description” content=“”》《！--网站的描述内容--》
《title》我的第一个html网页《/title》《！--标题--》
《！--设置网站的小图标--》
《link rel=“shortcut icon” href=“” type=“image/png”》
《style》
/*书写样式的地方*/
《/style》
《link rel=“stylesheet” href=“style.css”》《！--用来引入外部样式文件--》
《/head》
《！--2.主体部分--》
《body》
《p》这是一个段落《/p》
《/body》
《script》
//放脚本代码的地方
《/script》
《/html》
2.常用标签：
《！--做移动端开发设置--》
《meta name=“viewport” content=“width=device-width， user-scalable=no， initial-scale=1.0， maximum-scale=1.0， minimum-scale=1.0”》
《！--1.div标签，用于布局，没有具体含义，分层。层--》
《div》《/div》
《！--2.hx：标题，从1级到6级，1级最大，6级最小，自动加粗，有默认字号--》
《h1》《/h1》。。。《h6》《/h6》
《！--3.p标签：表示段落。相当与一个回车。--》
《p》《/p》
《！--4.br：生成换行符--》
《br》
《！--6.a标签，实现链接跳转，target：_blank新窗口/_self当前窗口_parent/top--》
《a href=“url地址/链接” title=“B站”》文本《/a》
《a href=“url地址” target=“_blank”》文本《/a》
《a href=“url地址” target=“_self”》文本《/a》
《a href=“‘#href” target=“#href”》文本《/a》
锚点链接 href=’#href‘ 目标位置的属性要设置为与其一直 id=’#href‘
《！--7.img用于加载外部图片图像，src用来设计加载的图片或图像的路径，alt当图片图像加载不成功时，显示alt中的内容，否则不会显示--》
src路径 alt替换文本 title 图片提示文本 width：图像宽度 height：图像高度 border边框
《img src=“” alt=“显示不出的名字”》
《！--8.span作用与div一样，都是用于布局，div会单独占一行，span不会，span便签用于行内布局--》
《span》《/span》
《！--9.ul和ol，前者无序后者有序，都用的li标签。--》
《ul》
《li》li1《/li》
《li》li2《/li》
《li》li3《/li》
《/ul》
《ol》
《li》li1《/li》
《li》li2《/li》
《li》li3《/li》
《/ol》
//自定义列表 重点每个网站的最下面基本都是通过自定义
《dl》 dl中只能有dt和dd 一个dt对应多个dd 为兄弟关系
《dt》《/dt》名词1
《dd》《/dd》名词1解释1
《dd》《/dd》名词1解释2
《/dl》自定义列表
3.标签属性：
《！--标签属性：
1.通常由属性名=“属性值”组成
2.起附加信息的作用。
3.不是所有标签都有属性，比如br标签--》
下面的title class就是属性名，而后面的就是属性值
《p title=“段落” class=“content” id=“content”》这是一个测试段落《/p》
4.部分其他标签：
《！--文本格式化标签：就是通过标签来美化文本外观-》
《！--1.b和strong：都有加粗作用，且都是行级标签（不会自动换行），
但strong还有强调作用。注：强调主要是用于SEO时，便于提前关键字--》
《b》加粗《/b》
《strong》加粗且强调《/strong》
《！--2 i和em：使文字倾斜，em具有强调作用。且都是行级标签（不会自动换行），
如果只是简单倾斜效果，用i标签就可以了，比如添加图标等--》
《i》倾斜《/i》
《em》倾斜且强调《/em》
《！--3.pre预格式化文本，保留换行和空格及宽度。
文字的字号会小一号，块级标签（在浏览器中会独占一行）--》
《pre》
pre预格式化
文本，保留换行和空
格及宽度
《/pre》
《！--samll和big，将文字缩小或放大一号（行级标签，不会独占一行，且不识别宽高）--》
《！--浏览器支持的最小字号是12px，显示比12px还小的文字的话，需要进行处理--》
《p》我是正常的《/p》
《small》我是小一号的文字《/small》
《！--sub和sup：设置文本为下标和上标，用来调整文本正常显示的基线，且文字会自动小一号--》
《p》正常显示：X1+X2=Y《/p》
《p》下标：X《sub》1《/sub》+X《sub》2《/sub》=Y《/p》
《p》下标：X《sup》1《/sup》+X《sup》2《/sup》=Y《/p》
删除线 《del》《/del》 《s》《/s》
下划线 《ins》《/ins》 《u》《/u》
转义字符： 空格 《 小于号 》大于号
5.表格标签以及表单标签：
表格标签结构： 作用：显示 展示数据
《table》 《！--表格标签--》
《th》《/th》 表头单元格
《tr》
《td》《/td》单元格
《/tr》行
《/table》
属性
align left center right 对齐
border边框 cellpadding 文字和单元格的距离 cellspacing 单元之间的距离 width
表格结构标签
《thead》《/thead》 表头区域
《tbody》《/tbody》 主体区域
合并单元格：跨行合并：rowspan行和行 跨列合并：colspan列和列
合并代码：跨行：在最上侧单元格为目标单元格，写合并代码
跨列：在最左侧单元格为目标单元格，写合并代码
跨行或跨列步骤：
1.确定跨行还是跨列 2.找到目标单元格 3.删除多余单元格
6.表单标签：
表单标签：主要用途：收集用户信息
表单由表单域 表单控件（元素） 提示信息组成
表单域 实现用户信息传递《form action=“” method=“”》《/form》
action跟着的为地址 method提交方式 name名称
input输入表单元素：
《input type=“text”》
type属性值：text文本 password密码 button ridio单选框（） checkbox（多选按钮）。..。.
submit（提交按钮，将表单值提交给服务器） reset 清除表单的所有数据
button 普通按钮 结合js使用 file 上传文件
name属性：表单元素的名字，单选按钮必须有相同的名字才可以多选1
单选按钮和复选框都要有相同的name
value属性 定义值
每个元素都应该有的，主要给后台人员来使用的
checked 针对单选和多选 当页面打开的时候默认选择
maxlength 最大长度
select下拉表单元素
使用场景：有多个选项，想节约空间《select name=“” id=“”》
《option value=“”》《/option》
《/select》
select至少包含一个option 在option中的属性selected = selected进行默认选择
《label for=“”》《/label》使用场景 for 和表单元素的id属性相同就对应上
textarea文本域表单元素 输入文本较多时
《textarea》《textarea》一般规定长度通过css