大型网站开发人员,哈尔滨餐饮加盟网站建设,网站资讯创作,wordpress爱搭配文章目录 快捷方式一、html5的声明二、html5基本骨架 2.1 html标签 2.2 head标签 2.3 body和head同级 2.4 body标签 2.5 title标签 2.6 meta标签 三、标题标签介绍与应用 3.1 标题的介绍 3.2 标题标签位置摆放 3.3 标签之段落、换行、水平线 3.3 标签之图片 3.3.1 图… 文章目录 快捷方式一、html5的声明二、html5基本骨架 2.1 html标签 2.2 head标签 2.3 body和head同级 2.4 body标签 2.5 title标签 2.6 meta标签 三、标题标签介绍与应用 3.1 标题的介绍 3.2 标题标签位置摆放 3.3 标签之段落、换行、水平线 3.3 标签之图片 3.3.1 图片路径详解 3.4 标签之超文本链接 3.5 标签之文本 四、列表标签之列表 4.1 有序列表 4.2 无序列表 4.3 无序列表之应用场景 五、标签之表格 5.1 表格标签 5.3 合并单元格 5.4 Form表单 5.4.1 表单元素 六、块元素和行内元素内联元素七、html5新标签 快捷方式
生成浏览器文件.html的快捷方式回车 vscode常用快捷方式 代码格式划sohiftaltf 向上或向下快速移动一行altup altdown 快速复制一行代码shiftaltup/down 快速保存ctrls 快速查找ctrlf 快速替换ctrlh 一、html5的声明
doctype 是document type的缩写!DOCTYPE html 是必须要写的作用是避免浏览器的怪异模式。
二、html5基本骨架 2.1 html标签
定义html文档浏览器看到html后就明白是一个html文档了所以其他元素需要包裹在这里面这个标签限定了文档的开始点和结束点。
!DOCTYPE html
html
/html2.2 head标签
定义文档头部。 文档头部描述了文档的各种属性和信息包括文档的标题、在web中的位置等。
!DOCTYPE html
htmlhead/head
/html2.3 body和head同级 2.4 body标签
body元素定义文档主体。 body元素包含文档的所有内容比如文本、超链接、图像、表格和列等会直接在页面中显示出来也就是用户可以直观的看到的内容。
!DOCTYPE html
htmlhead/headbody在浏览器中能够显示我/body
/html2.5 title标签
可定义文档的标题可显示在浏览器窗口的标题栏或状态栏上 标签是标签中唯一必须要求包含的东西就是说写head一定要写title的增加有利于SEO优化seo是搜索引擎优化的英文缩写通过对网站内容调整满足搜索引擎的排名需求 !DOCTYPE html
htmlheadtitle第一个界面/title/headbody我会显示在浏览器中/body
/html2.6 meta标签
meta标签用来描述一个html网页文档的属性关键词等。
!DOCTYPE html
html langenheadmeta charsetutf-8title第一个界面/title/headbody我会显示在浏览器中/body
/html三、标题标签介绍与应用 3.1 标题的介绍
标题是通过
-
标签进行定义 定义最大的标题
定义最小的标题 h$*6 快速生成
-
标签
h1一级标题/h1
h2二级标题/h2
h3三级标题/h3
h4四级标题/h4
h5五级标题/h5
h6六级标题/h63.2 标题标签位置摆放
在标签中添加属性align“left/center/right” 默认居左 3.3 标签之段落、换行、水平线
段落是通过
标签定义的
p这是一个段落/p换行 如果想在不产生一个新段落的情况下进行换行新行请使用。 元素是一个空的html元素
p这个br段落br演示了分行的效果/p水平线 hr//标签在html页面中创建水平线
hr color width size align/属性 color设置水平线的颜色 width设置水平线的长度 size设置水平线的高度 align设置水平线的对齐方式 3.3 标签之图片
标签定义html页面中的图像
img src alt title width height注意是单标签不需要进行闭合操作 属性 src路径图片的地址或名称 alt规定图像的替代文本 width规定图像的宽度 height规定图像的高度 title鼠标悬停在图片上给予提示 3.3.1 图片路径详解
绝对路径 绝对路径是电脑的盘符存储与访问的具体地址
E:\itbaizhancode\1.jpg
img srcE:\itbaizhancode\1.jpg相对路径
子级关系/父级关系…/同级关系./ 写相对路径的时候如果是同级关系./可以省略先找到同级再找子级 网络路径
https://ts1.cn.mm.bing.net/th/id/R-C.db3836610f631c4d06bdde4fd923e98f?rikqaf5de1wCMNaRwriuhttp%3a%2f%2fseopic.699pic.com%2fphoto%2f50093%2f5337.jpg_wh1200.jpgehkOe3ZIbrBYnhQ0zqIu%2ftsRSE8srtaRlewEtSIg3sp6Zw%3drislpidImgRawr0 3.4 标签之超文本链接
html使用《a》来设置超文本链接 超链接可以是一个字或词或图像可以点击它来跳转到新的文档或文档的某个部分。
a hrefurl链接文本/a超链接属性 在标签《a》中使用了href属性来描述链接的地址。 样式如下后期可以通过css样式修改掉这些效果
一个未访问过的链接显示为蓝色字体并带有下划线 访问过的链接显示为紫色并带有下划线。点击链接时链接显示为红色并带有下划线 3.5 标签之文本
常用文本标签
四、列表标签之列表 4.1 有序列表
有序列表是一列项目列表项目使用数字进行标记。有序列表始于《ol》标签每个列表项始于《li》标签
olli第一个/lili第二个/li
/oltype属性 《ol》的属性type拥有的选项
1 表示列表项目用数字标号 (1,2,3…)a 表示列表项目用小写字母标号 (a,b,c…)A 表示列表项目用大写字母标号 (A,B,C…)i 表示列表项目用小写罗马数字标号 (iii,iii…)l 表示列表项目用大写罗马数字标号 (l,Il,Ill…) 4.2 无序列表
无序列表实现 无序列表是一个项目的列表此项目使用粗体圆点典型的小黑圆圈进行标记。 无序列表始于《ul》标签。每个列表项始于《li》标签。
ulli第一个/lili第二个/li
/ultype属性 《ul》的属性type拥有的选项
disc默认实心圆circle 空心圆square 小方块none 不显示
ul typesquareli第一个/lili第二个/li/ulul typediscli第一个/lili第二个/li/ul无序列表嵌套 ulli蔬菜/lili水果ulli苹果/lili芒果/li/ul/lili肉类/li/ul 4.3 无序列表之应用场景
导航效果 ulli蔬菜/lili水果/lili肉类/li/ul快捷键ulli*3(数字根据自己的需要的li数量修改)
五、标签之表格 5.1 表格标签
表格《table》 行《tr》 单元格《td》
table border1 width100pxtrtd张三/tdtd李四/td/trtrtd阿里/tdtd京东/td/tr
/table快捷键tabletr*2td{单元格}
border:设置表格边框width设置表格宽度height设置表格高度 5.3 合并单元格 水平合并colspan 保留左边删除右边 垂直合并rowspan 保留上边删除下边 5.4 Form表单
表单在web网页中用来给用户填写信息从而能采集用户信息使网页具有交互的功能。 所有用户输入内容的地方都用表单来写如登录、注册、搜索框。 表单是由容器和控件组成的一个表单一般应该包含用户填写信息的输入框按钮等这些输入框按钮叫做控件表单就是容器它能够容纳各种各样的控件。 form actionurl methodget|post namemyform/form属性说明 action服务器地址 name表单名称 method中get和post的区别 数据提交方式get把提交的数据url可以看到post看不到 get一般用于提交少量数据post用来提交大量数据 5.4.1 表单元素
一个完整的表单包含三个基本组成部分表单标签、表单域、表单按钮
forminput typetextinput typesubmit
/form文本框 文本域通过《input type“text”》标签来设定当用户要在表单中输入字母、数字内容时就会用到文本域。
formFirst name:input typetext namefirstnameLast name:input typetext namelastname
/form密码框 密码字段通过标签《input type“password”》来定义
formpassword:input typepassword namepwd
/form密码字段字符不会明文显示而是以星号或者圆点替代 提交按钮 当用户单击确认按钮时表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
form nameinput actionurl methodgetusername:input typetext nameuserinput typesubmit value登录
/form六、块元素和行内元素内联元素 块级元素div、form、h1-h6、hr、p、table、ul 内联元素a、b、em、i、span、strong 行内块级元素特点不换行能够识别宽高button、img、input
七、html5新标签
《header》《/header》头部《nav》《/nav》导航《section》《/section》定义文档中的节比如章节、页眉、页脚《aside》《/aside》侧边栏《footer》《/footer》脚部《article》《/article》代表一个独立的、完整的相关内容块例如一个用户的评论
