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