欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML基础（二）--基础标签

程序员文章站 2022-04-24 15:34:22
...

html通过<h1>--<h6>标签来定义标题

含有align属性，有如下几个常用值：

<1>center：标题居中显示显示

<2>left：标题靠左显示

<3>right：标题靠右显示

<4>justify：两端对齐。和靠左对齐的区别在于在多行文本的情况下，界面两端没有空隙，而靠左对齐界面的右边会有空隙

H1标签使用建议：


1.在同一个页面当中不要重复多次的使用该标签，这样会造成表达主体不明确，造成搜索引擎不能很好的判断该文章的定位；
2.title标签可以包含h1，但是H1标签却不能包含title，H1针对是只是文本性质的文章标题；
3.不要在logo当中使用，因为H1标签是对文章或者是列表页的文字标题使用的，logo通常是图片，应用于图片的作用又肯能会适得其反；
4.H1标签应该出现在body当中，不应该出现头部当中，并且不得出现在<h2>-<h6>之后，并且H1标签之后不应该再出现H1标签，可以使用其他H标签，这样可以提高文章和网站的表达层次，搜索引擎会更加的喜欢。

H标签使用的SEO建议

1、每个网页只能拥有一个<h1>标签。

2、<h1>用来修饰网页的主标题，一般是网页的标题，文章标题，<h1>中部署主关键词。<h1>尽量靠近在html中的<body>标签，越近越好，以便让搜索引擎最快的领略主题。

3、<h2>表示一个段落的标题，或者说副标题，部署长尾关键词。

4、<h3>表示段落的小节标题，<h3>效果跟Strong差不多，一般是用在段落小节。

5、<h4>-<h6>基本很少用到，是告诉搜索引擎这些不是很重要的内容，当一篇文章内容较多的时候，可以用来说明一些内容是不很重要的。

标题（H1-H6）标签是采用关键词的重要地方,爬虫搜索的关键所在。

 

 

  • <P>段落

html通过<p>标签来定义段落

HTML中P(内联元素)标签内不可包含DIV(块元素)标签

注意：

内联元素不应该包含块元素，反之则可以，内联元素却不能包含块元素，它只能包含其他的内联元素。还有一些情况就是一些块元素不可以包含另一些块元素，我们使用的DTD中规定了块级元素是不能放在<p>里面的，原理是遇到下一个块元素就会把自己结束掉。

举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1 align="center"> 标题</h1>
		 <p>测试一下块元素与<span>内联元素</span>的差别</p>
       <p>测试一下<div>块元素</div>与内联元素的差别</p>
          <p>测试文字
     < ul>
          <li>现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。</li>
     </ul>
       测试文字
    </p>
       <ul>
         <li><p>这样是可以的</p></li>
    </ul>
	</body>
</html>

效果：

HTML基础（二）--基础标签

  • 原因：当一个<p>签还没结束时，遇到下一个块元素就会把自己结束掉，所以刚才那样的写法会变成这样：
<p>测试文字</p>

    <ul>   

     <li>现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。</li>

    </ul>

测试文字<p></p>

 

  • p内部不能加div道理是一样。

  • 所谓的不可*嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>；段落标记的<p>；分隔线<hr>和一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。
  • 在HTML里有几个元素是比较特别的：<ul>、<ol>、<dl>、<table>，它们的子一层必须是指定元素，<ul>、<ol>的子一级必须是<li>；<dl>的子一级必须是<dt>或者<dd>；<table>的子一层必须是<caption> 或<thead>、<tfoot>、<tbody>等，而再子一层必须是<tr> （<tr>只存在于<thead>、<tfoot>、<tbody>中），之后才是可放内容的<td>或者<th>。

  • 关于(X)HTML Strict下嵌套规则的图

  • HTML基础（二）--基础标签

    <p> 标签支持 HTML 中的全局属性

  •  HTML5 中新添加的属性。

    属性 值 描述 例子 浏览器支持
    class classname 规定元素的一个或多个类名（引用样式表中的类） <p class="ab"></p> 所有浏览器都支持。
    contenteditable  

    true（可编辑）

    false（不可编辑）

    		 规定元素内容是否可编辑 <p contenteditable="true">这是一个可编辑的段落。</p> 所有主流浏览器都支持。
    contextmenu      menu_id（要打开的 <menu> 元素的 id。） 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。

    <p contextmenu="supermenu">本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。</p>

    <menu id="supermenu">
    <command label="Step 1: Write Tutorial" οnclick="doSomething()">
    <command label="Step 2: Edit Tutorial" οnclick="doSomethingElse()">
    </menu>

    		 目前只有 Firefox 支持 contextmenu 属性。
    data-*             somevalue  (规定属性的值（以字符串）。)

    data-* 属性用于存储页面或应用程序的私有自定义数据。

    data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

    存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

    data-* 属性包括两部分：

    • 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
    • 属性值可以是任意字符串

    注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。

    		 <p id="test" data-age="24">
            Click Here
    </p>    		 所有主流浏览器都支持 data-* 属性。
    dir

    ltr  （默认。从左向右 的文本方向。

    rtl   （从右到左的文本方向。）

    		 规定元素中内容的文本方向。 <p dir="rtl">Write this text right-to-left!</p> 所有浏览器均支持 dir 属性。
    draggable         

    true  (规定元素的可拖动的。)

    false  (规定元素不可拖动。)

    auto  (使用浏览器的默认行为。)

    draggable 属性规定元素是否可拖动。

    提示：链接和图像默认是可拖动的。

    		 <p draggable="true">这是一个可拖动的段落。</p>

    Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 属性。

    注释：Internet Explorer 8 以及更早的版本，不支持 draggable 属性。
    dropzone           

    copy  (拖动数据会产生被拖动数据的副本。)

    move  (拖动数据会导致被拖动数据被移动到新位置。)

    link  (拖动数据会产生指向原始数据的链接。) 

    		 dropzone 属性规定在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。 <p dropzone="copy"></p> 目前所有主流浏览器都不支持 contenteditable 属性。
    hidden                

    hidden 属性是布尔属性。

    如果设置该属性，它规定元素仍未或不再相关。

    浏览器不应显示已规定 hidden 属性的元素。

    hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）。然后，JavaScript 可以删除 hidden 属性，以使此元素可见。

    		 <p hidden="hidden">这是一段隐藏的段落。</p> 所有主流浏览器都支持 hidden 属性，除了 Internet Explorer。
    id idname

    id 属性规定 HTML 元素的唯一的 id。

    id 在 HTML 文档中必须是唯一的。

    id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。

    		 <p id="ab"></p> 所有浏览器都支持。
    lang language_code  (规定元素内容的语言代码。) lang 属性规定元素内容的语言。

    <p lang="fr">Ceci est un paragraphe.</p>

    		 所有浏览器均支持 lang 属性。
    spellcheck         

    true  (对元素进行拼写和语法检查.)

    false  (不检查元素。)

    spellcheck 属性规定是否对元素进行拼写和语法检查。

    可以对以下内容进行拼写检查：

    • input 元素中的文本值（非密码）
    • <textarea> 元素中的文本
    • 可编辑元素中的文本

    实例

    进行拼写检查的可编辑段落：<p contenteditable="true" spellcheck="true">这是一个段落。</p>

    		  

    Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 支持 spellcheck 属性。

    注释：Internet Explorer 9 以及更早的版本不支持 spellcheck 属性。
     style  style_definition   (一个或多个由分号分隔的 CSS 属性和值。)  

    style 属性规定元素的行内样式（inline style）

    style 属性将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式。

    		  

    实例

    在 HTML 文档中使用 style 属性：<p style="color:red">This is a paragraph.</p>

    		  所有浏览器都支持。
     title  text   (规定元素的工具提示文本（tooltip text）。)  

    title 属性规定关于元素的额外信息。

    这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。

    提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。

    		  

    实例

    在 HTML 文档中使用 title 属性：<p title="Free Web tutorials">W3School.com.cn</p>

    		  所有浏览器都支持。
     translate          

     yes  (规定应该翻译元素内容。)

      no   (规定不应翻译元素内容。)

    		  

    translate 规定是否应该翻译元素内容。

    提示：请使用 class="notranslate" 替代。

    		  

    实例

    规定不应翻译某些元素：<p translate="no">请勿翻译本段。</p>
    <p>本段可被译为任意语言。</p>

    		  所有主流浏览器都无法正确地支持 translate 属性。

     

     

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • <img>图像

img元素向网页中嵌入一副图像。

  • 属性：

<img>标签有两个必需的属性：src属性（规定显示图像的URL）和alt属性（规定图像的替代文本）。

可选的属性：

  • height:定义图像的高度。
  • width:定义图像的宽度。
  • ismap:将图像定义为服务器端图像映射。
  • longdesc：指向包含长的图像描述文档的URL。
  • usemap:将图像定义为客户端的图像映射。

 

  • 图片居中方法：

让图片被包在块元素里面，这里可以用div，因为text-align只对块起作用。

	<div style="text-align: center;">
   		<img  src="pIC.jpg" />
   	</div>

  • 消除图片列表之间的空隙的几种方法

  • 1.、将图片转换为块级对象
    即，设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {display:block;}”。---

    2.、设置图片的垂直对齐方式
    即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。如本例中增加一组CSS代码：“#sub img {vertical-align:top;}”。

    3.、设置父对象的文字大小为0px
    即，在#sub中添加一行：“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

    4.、改变父对象的属性
    如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置“overflow:hidden;”来解决。如本例中可以向#sub中添加以下代码：“width:88px;height:31px;overflow:hidden;”。

    5.、设置图片的浮动属性
    即在本例中增加一行CSS代码：“#sub img {float:left;}”。如果要实现图文混排，这种方法是很好的选择。

以上方法1，2，5很常用

 

  • <a>链接

  • 超链接样式

一组专门的预定义的类称为伪类，主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符＋样式规则来控制。伪类选择符包括： 
a表示所有状态下的连接 如： a{color:red} 
① a:link： 未访问链接 ,如 a:link {color:blue} 
② a:visited： 已访问链接 ,如 a:visited{color:blue} 
③ a:active： **时（链接获得焦点时）链接的颜色 ,如 a:active{color:blue} 
④ a:hover： 鼠标移到链接上时 ,如 a:hover {color:blue} 
一般a:hover和a:visited链接的状态（颜色、下划线等）应该是相同的。 
前三者分别对应body元素的link、vlink、alink这三个属性。 
四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。
另外，a:active不能设置有无下划线（总是有的）。 

  • 如何去掉<a>的下划线：

 对超链接下划线设置 使用代码"text-decoration"

语法： 

text-decoration : none || underline || blink || overline || line-through 

  • text-decoration参数： 
  • none : 　无装饰
  • blink : 　闪烁
  • underline : 　下划线
  • line-through : 　贯穿线
  • overline : 　上划线

去掉下划线的方法就是将其text-decoration设置为none即可。

  • 属性

 HTML5中的新属性

 

属性

值

描述

例子

浏览器支持

download  5                

filename（规定作为文件名来使用的文本。）

规定被下载的超链接目标。                         

         

<a href="/images/myw3schoolimage.jpg" download="w3logo"></a>

                                                                

 只有 Firefox 和 Chrome 支持

href

url      超链接的 URL。

可能的值：

  • 绝对 URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"）

  • 相对 URL - 指向站点内的某个文件（href="index.htm"）

  • 锚 URL - 指向页面中的锚（href="#top"）

规定链接指向的页面的 URL。

 <a href="http://www.w3school.com.cn">W3School</a> 所有浏览器都支持
hreflang

hreflang="value"

双字符的语言代码，指定被链接文档的语言。

 规定被链接文档的语言。 <a href="http://www.w3school.com.cn" hreflang="zh">
W3School
</a>		 主流的浏览器几乎都不支持
media    media_query

规定被链接文档是为何种媒介/设备优化的。

该属性用于规定目标 URL 是为特殊设备（比如 iPhone）、语音或打印媒介设计的。

该属性可接受多个值。

只能在 href 属性存在时使用。

 <a href="att_a_media.asp？output=print" media="print and (resolution:300dpi)">打开用于打印的 media 属性页面</a>  
 rel  text  规定当前文档与被链接文档之间的关系。

用于 <a> 标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系，而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 <a> 标签中同时使用。

rel 或 rev 属性的值都是以空格分隔的关系列表。实际的关系名和它们的含义取决于你自己：HTML 或 XHTML 标准并没有正式提出这两种属性。例如，一系列文档中的某个文档可能会在链接中包含它的关系：

 <a rel="friend" href="http://www.w3c.com/">w3c</a>  所有浏览器都支持 rel 属性。
 target

 _blank   (在新窗口中打开被链接文档。)

_self       (默认。在相同的框架中打开被链接文档。)

_parent  (在父框架集中打开被链接文档。)

_top       (在整个窗口中打开被链接文档。)

framename (在指定的框架中打开被链接文档。)

  规定在何处打开链接文档。

 <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

  
type    

被链接文档的 MIME 类型。

规定被链接文档的的 MIME 类型。

只能在 href 属性存在时使用。

 <a href="http://www.w3school.com.cn"type="text/html">W3School</a>  

 

 

 

 

 

 

 

 

 

 

 

 

上一篇： HTML基础笔记(一)

下一篇： 01 HTML快速入门3

推荐阅读