初学HTML5第一章HTML基础(day02)-CFANZ编程社区

1.HTML常用标签

(1)标题标签

单词缩写：head 头部，标题

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标签，即：h1、h2、h3、h4、h5、h6

标题标签语义：作为标题使用，并且依据重要性递减，基本语法格式如下：

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>


<!-- 标题标签特性：引起换行 会放大/缩小 加粗字体 -->
<!-- 需要注意的是：h1标签因为重要，尽量少用。h1大多都是给logo/title使用 -->

(2) 段落标签

单词缩写：paragraph 段落

在网页中要把文字有条理的显示出来，离不开段落标签，可以将整个网页的内容分为若干个段落标签。基本语法格式如下：

<p>我是一个段落</p>

<!-- 段落标签：有段前和段后 会换行 不会对字体进行修饰（放大缩小加粗） -->
<!-- 默认情况下，一个段落中的文本会依据浏览器的大小自动换行 -->

(3) 水平线标签

单词缩写： horizontal 横线，水平线

在网页中会经常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单的通过标记来完成。hr 就是创建横跨网页水平线的标记。基本语法格式如下：

<hr />

案例：新闻页面

(4)换行标签

单词缩写：break 打断，换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端才会自动换行。如果希望某段文本强制换行显示，就需要使用换行标签。语法格式如下：

<br />

(5)div span标签

div span是没有语义的，是网页布局中主要的2个盒子。

div是division的缩写，表示分割、分区的意思

span表示跨度、跨距、范围

语法格式如下：

<div>这是div</div>
<span>这是span</span>

<!-- 
    div标签：用来布局最多 ---盒子 --块
    特点：不会修饰文本 也不会段前段后 换行 --!>

<!--    
    span标签：用来放文本用到最多
    特点：和普通文本一模一样
     -->

(6)文本格式化标签00

标签	显示效果
\<i>\</i> \<em>\</em>	文字以斜体方式显示（XHTML之后推荐使用em）
<s></s> <del></del>	文字以加删除线方式显示（XHTML之后推荐使用del）
<b></b> <strong></strong>	文字以粗体方式显示（XHTML之后推荐使用strong）
<u></u> <ins></ins>	文字以加下划线方式显示（XHTML之后不赞成使用u）

b i s u没有强调的意思，strong、em、del、ins语义更强烈，有强调的意思

(7)标签属性

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。基本语法格式如下：以键值对的方式定义

<标签名 属性1="属性值1" 属性2="属性值2"...> 内容 </标签名>



<!--
    1.标签可以拥有多个属性，必须写在开始标签中，位于标签名之后。
    2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
    3.任何标签的属性都有默认值，省略该属性则取默认值。


注意：标签的共有属性：id，class，style，title等
--!>

(8)图像标签

单词缩写：image 图像

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签。语法格式如下

<img src="图像url"/>
<!-- 
    src属性用于指定图像文件的路径和文件名，是必须的属性
    图像标签：image --- img
        标签的属性：写在开始标签里面 通过空格和标签名分隔开
        img标签的属性：
            src：图片的地址
            alt：提示作用当图片加载出错 没有加载出来的时候 显示alt对应的文字
            border：边框 值为数字
            width：图片的宽 值为数字
            heigt：图片的高 值为数字
            title: 鼠标悬停时显示的内容
        特性：没有换行 可以设置宽高----  这种特性称为行内块级
        问题：img是不是行内块级标签？
 -->

(9)链接标签

单词缩写： anchor 锚，铁锚

在HTML中创建超链接非常简单，只需要用标签将链接对象环绕即可。基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">链接的文本或图像</a>
    

    <!--
            href：链接的目的地
            target：跳转到目标地址的时候 实在当前自己的窗口打开 还是在新的窗口打开
                _self：默认值
                _blank：在新的窗口打开
            特性：行内标签 有一些自己默认的颜色 和 下划线效果
    --!>

链接的分类：

1.外部链接：需要添加http://的域名，如 <a href="http://www.baidu.com/">百度</a>

2.内部链接：网站内部页面之间的相互链接，直接链接内部页面名称，如<a href="index.html">内部链接</a>

3.空连接：如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”（即href=“#”），表示该链接暂时为一个空链接。

或者设置href属性值为"javascript:;" 两者的区别：前者当页面出现滚动条时，点击会滚动到页面顶部，后者不会

4.下载链接：

如果href里面地址是一个压缩包或xlxs浏览器无法解析的文件，会下载这个文件，如<a href="image.zip">下载图片</a>

但像txt，jpg这些浏览器支持直接打开的文件是不会执行下载的，而是会直接预览图片或文本。(加download属性+open with live server)

5.网页元素链接：在网页中各种网页元素，如文本、图像、表格、音频、视频等都可以插入超链接

(10)锚点定位

通过创建描点链接，用户能够快速定位到目标内容。

创建描点链接分为两步：

1、在跳转目标的位置添加id名标注
2、使用<a href="#id名">链接文本</a>

<body>
    <!-- 标签的属性id 所有页面上布局用的标签都可以使用id属性 -->
    <a href="#HTML">HTML</a>
    <a href="#CSS">CSS</a>
    <a href="#JavaScript">JavaScript</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h1 id="HTML">HTML</h1>
    <p></p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h1 id="CSS">CSS</h1>
    <p></p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h1 id="JavaScript">JavaScript</h1>
    <p></p>

</body>

(11)base标签

base 单标签，可以设置整体链接打开的状态是以新窗口打开还是在当前窗口中打开。如：

 <!--
         base 
            target：规定页面上所有的超链接的窗口打开方式 a标签也有target属性  以a标签自己的为准
            href：设置基础链接 页面上所有的相对路径都会链接地址前面拼接基链
        -->
    <base target="_blank">
</head>
<body>
    <a href="https://www.baidu.com/">1</a>
    <a href="https://www.baidu.com/">2</a>
    <a href="https://www.baidu.com/">3</a>
    <a href="https://www.baidu.com/">4</a>

</body>

(12)特殊字符

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

特殊字符	描述	字符的代码
	空格符	&nbap;
<	小于号	<
>	大于号	>
&	和号	&amp:
￥	人民币	¥
©	版权	©
®	注册商标	®
°	摄氏度	°
±	正负号	±
×	乘号	&time;
÷	除号	÷
2	平方2(上标2)	²
3	平分3(上标3)	³

(13)注释标签


<!--在HTML中还有一种特殊标签——注释标签。如果需要在HTML文档中添加一些便于阅读
和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：
 -->

<!-- -->


<!--注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载
到用户的计算机上，查看源代码时可以看到。 -->

(14)html标签嵌套规则

内联不能嵌套块级，块级可以嵌套内联元素
有几个特殊的块级元素只能嵌套内联元素，不能嵌套块级元素：h1~h6、p、dt

p标签不能嵌套块级元素甚至不能嵌套p元素，只能嵌套内联元素，不然对p嵌套的块级元素设置css不起作用
<li> <dd>标签可以嵌套任何元素 <li> <ul><li></li> </ul> </li>
<a>标签最好不要嵌套块级元素，可以嵌套内联元素。但是不能嵌套<a>标签和<input>之类的标签
ul和ol的子元素只能是li，不能是别的元素
button里面不要嵌套a标签，不然在js里面会有两个事件，还有就是button里面放img要记得给图片添加alt属性