HTML(英文HyperTextMarkupLanguage的缩写)中文译为“超文本标签语言”,主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
1HTML骨架格式
日常生活的书信,我们要遵循共同的约定。
同理:HTML有自己的语言语法骨架格式:
HTMLheadtitle/title/headbody/body/HTML
html结构:包括headbodyhtml标签是以尖括号包围的关键字html标签通常是成对出现的,有开始就有结束,包含成对标签、独立标签html通常都有属性,格式:属性名=“属性值”(多个属性之间空格隔开)html标签不区分大小写,建议小写
2html基本标签
HTML标签
作用:所有HTML中标签的一个根节点。
head标签
作用:用于存放:title,meta,base,style,script,link
注意:在head标签中我们必须要设置的标签是title
title标签
作用:让页面拥有一个属于自己的标题。
body标签
作用:页面在的主体部分,用于存放所有的HTML标签:p,h,a,b,u,i,s,em,del,ins,strong,img
3颜色的表示方式
color:文本的颜色bgcolor:背景色background:背景图片
第一种方式:使用颜色名称:仅仅有16种颜色名可用英文字母,其余的要用16进制值。
aqua,black,blue,fuchsia,gray,gen,lime,maroon,navy,olive,purple,d,silver,teal,white,yellow
第二种方式:RGB模式
第三种:十六进制
##ffffff##
4文档类型!DOCTYPE(重点)
!DOCTYPEhtml这句话就是告诉我们使用哪个html版本,我们使用的是html5的版本。html有很多版本,那我们应该告诉用户和浏览器我们使用的版本号。
标签位于文档的最前面,用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范,必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能按指定的文档类型进行解析。
5HTML标签的语义化(重点)
所谓标签语义化,就是指标签的含义。
为什么要有语义化标签:方便代码的阅读和维护,同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容,使用语义化标签会具有更好地搜索引擎优化
核心:合适的地方给一个最为合理的标签。
语义是否良好:当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性,不管是谁都能看懂这块内容是什么。
遵循的原则:先确定语义的HTML,再选合适的CSS。
6总结:(重要知识点)
双标签
html/htmlhead/headtitle/titlebody/bodytable/tabletr/trtd/tdspan/spanp/pform/formh1/h1h2/h2h3/h3h4/h4h5/h5h6/h6object/objectstyle/styleb/bu/ustrong/strongi/idiv/diva/ascript/scriptcentercenter
单标签
brhrimginputparammetalink
排版标签
1.注释标签:!–注释–-------------------------------------2.换行标签:br/-------------------------------------3.段落标签:p文本文字特点:段与段之间有行高属性:align对齐方式(left:左对齐center:居中right:右对齐)-------------------------------------4.水平线标签:hr/属性:width:水平线的长度(两种:第一种:像素表示;第二种,百分比表示)size:水平线的粗细(像素表示,例如:10px)color:水平线的颜色align:水平线的对齐方式(left:左对齐center:居中right:右对齐)-------------------------------------5.容器标签(重点)div:块级标签,独占一行,换行span:行级标签,所有内容都在同一行作用div:主要是结合css页面分块布局span:进行友好提示信息
标题标签(熟记)
为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,随着数字增大文字逐渐变小,字体是加粗的,内置字号,默认占据一行;
h1、h2、h3、h4、h5和h6
列表标签
容器里面装载着文字或图表的一种形式,叫列表。列表最大的特点就是整齐、整洁、有序
无序列表ul(重点)
无序列表标签:ul/ul属性:type:三个值,分别为:circle(空心圆),disc(默认,实心圆),squa(黑色方块)列表项:li/li注意:ul/ul中只能嵌套li/li,直接在ul/ul标签中输入其他标签或者文字的做法是不被允许的。li与/li之间相当于一个容器,可以容纳所有元素。无序列表会带有自己样式属性,放下那个样式,一会让CSS来!
有序列表ol
有序列表标签:ol属性:type:1、A、a、I、i(数字、字母、罗马数字)列表项:li/li
定义列表dl
\dldt名词1dd名词1解释1dd名词1解释2…dt名词2dd名词2解释1dd名词2解释2…/dldl名词1名词1解释1名词1解释2...名词2名词2解释1名词2解释2...
图片标签
独立标签
属性:src:图片