学习html的一些笔记(全程软件测试八十三)(1)

HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”,主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

1 HTML骨架格式

日常生活的书信,我们要遵循共同的约定。

同理:HTML 有自己的语言语法骨架格式:

<HTML> <head> <title></title> </head> <body> </body> </HTML>

  1. html结构:包括head body
  2. html标签是以尖括号包围的关键字
  3. html标签通常是成对出现的,有开始就有结束,包含成对标签、独立标签
  4. html通常都有属性,格式:属性名=“属性值”(多个属性之间空格隔开)
  5. html标签不区分大小写,建议小写

2 html基本标签

作用:所有HTML中标签的一个根节点。

作用:用于存放:title,meta,base,style,script,link

注意:在head标签中我们必须要设置的标签是title

作用:让页面拥有一个属于自己的标题。

作用:页面在的主体部分,用于存放所有的HTML标签:p,h,a,b,u,i,s,em,del,ins,strong,img

3 颜色的表示方式

  1. color:文本的颜色
  2. bgcolor:背景色
  3. background:背景图片

第一种方式:使用颜色名称: 仅仅有16种颜色名可用英文字母,其余的要用16进制值。

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

第二种方式:RGB模式

第三种:十六进制

#000000 #ffffff #325687 #377405

4 文档类型<!DOCTYPE>(重点)

<!DOCTYPE html>这句话就是告诉我们使用哪个html版本, 我们使用的是 html 5 的版本。 html有很多版本,那我们应该告诉用户和浏览器我们使用的版本号。

标签位于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范,必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能按指定的文档类型进行解析。

5 HTML标签的语义化(重点)

所谓标签语义化,就是指标签的含义。

为什么要有语义化标签:方便代码的阅读和维护,同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容,使用语义化标签会具有更好地搜索引擎优化

核心:合适的地方给一个最为合理的标签。

语义是否良好: 当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性,不管是谁都能看懂这块内容是什么。

遵循的原则:先确定语义的HTML ,再选合适的CSS。

6 总结:(重要知识点)

<html></html> <head></head> <title></title> <body></body> <table></table> <tr></tr> <td></td> <span></span> <p></p> <form></form> <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> <object></object> <style></style> <b></b> <u></u> <strong></strong> <i></i> <div></div> <a></a> <script></script> <center><center>

<br> <hr> <img> <input> <param> <meta> <link>

学习html的一些笔记(全程软件测试八十三)(2)

学习html的一些笔记(全程软件测试八十三)(3)

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(默认,实心圆),square(黑色方块) 列表项:<li></li> 注意: <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。 <li>与</li>之间相当于一个容器,可以容纳所有元素。 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!

有序列表 ol

有序列表标签:<ol> 属性:type:1、A、a、I、i(数字、字母、罗马数字) 列表项: <li></li>

定义列表dl

\dl> <dt>名词1 <dd>名词1解释1 <dd>名词1解释2 … <dt>名词2 <dd>名词2解释1 <dd>名词2解释2 … </dl> dl> 名词1 名词1解释1 名词1解释2 ... 名词2 名词2解释1 名词2解释2 ...

独立标签

属性: src:图片地址: 相对路径 (同一个网站) 绝对路径 (不同网站) width:宽度height:高度border:边框align:对齐方式,代表图片与相邻的文本的相当位置(有三个属性值:top middle bottom) alt:图片的文字说明hspace 和 vspace 设定图片边沿上下左右空白,以免文字或其它图片过于贴近

链接标签

超链接可以是文本,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。(不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接)

属性: href:跳转页面的地址(跳转到外网需要添加协议); name:名称,锚点(回到锚点: 顶部,底部,中间),在访问锚点的书写格式:#name的值 target:_self(自己) _blank(新页面,之前页面存在) _ __parent top 默认 self_search相等于给页面起一个名字,如果再次打开时,如果页面存在,则不再打开新的页面。可以是任意名字。

如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。

,