html:常用标签

我们首先来介绍一下head标签的主要内容和作用,文档的头部描述了文档的各种属性和信息,包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用(移动端)的等。 以下标签是可以用在head标签中的:


    标题信息
    
    
    
    


一 title标签

</code>标签:在<code><title></code>和<code></title</code>>标签之间的文字内容是网页的标题信息,它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。</p> <p>我们接下来做一个小练习,创建一个带有我们自定义标题内容的网页:</p> <pre><code><!DOCTYPE HTML> <html> <head> <title>路飞学城

将上面的文件另存为demo.html,然后用浏览器打开,就可以看到下面的内容。

HTML_03.png

上面我们介绍了title标签的用法,接下来我们继续看一下head标签中可以使用的其他标签:

二 meta标签

Meta标签介绍:

元素可提供有关页面的原信息(mata-information),针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部,不包含任何内容。

提供的信息是用户不可见的。 meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

常用的meta标签:

  1. http-equiv属性

它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。








  1. name属性

主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。




三 body标签

想要在网页上展示出来的内容一定要放在body标签中。 把我们之前海燕那一段HTML代码贴过来,保存到一个HTML格式的文件中。





路飞学城


海燕


在苍茫的大海上,


狂风卷集着乌云。


在乌云和大海之间,


海燕像黑色的闪电,


在高傲地飞翔。



body.png

四 标题标签 h1~h6

-
标签可定义标题。

定义最大的标题。
定义最小的标题。 由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用css来定义来达到漂亮的显示效果。 标题标签通常用来制作文章或网站的标题。

h1~h6标签的默认样式:



    
        
        路飞学城
    
    
        

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

请看上面代码

书写在一行上展示,但是在浏览器的效果却是换行了,大家现在预习一下9.1.9标签分类知识点。

文本样式标签主要用来对HTML页面中的文本进行修饰,比如加粗、斜体、线条样式等...

1\. ``:加粗
2\. ``:斜体
3\. ``:下划线
4\. ``:删除线
5\. ``:上标 
6\. ``:下标

现在如果想在一段文字中特别强调某几个字,这时候就可以用到``或``标签。

这两个标签都是表示强调,但是两者在强调的语气上有区别:``表示强调,``表示更强烈的强调。
在浏览器中``默认会用斜体表示,``会用粗体来表示。两个标签相比,我们通常会推荐大家使用``表示强调

段落标签 p

,paragraph的简写。定义段落


        

路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能

路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能

浏览器展示特点:

  1. 跟普通文本一样,但我们可以通过css来设置当前段落的样式
  2. 是否又独占一行呢? 答案是的 块级元素

超链接标签 a

超级链接标记代表一个链接点,是英文anchor(锚点)的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像


    

路飞学城 下载包 联系我们 跳转到顶部 跳转到p1 内容 内容

target:_blank 在新的网站打开链接的资源地址 target:_self 在当前网站打开链接的资源地址 title: 表示鼠标悬停时显示的标题

链接其他表现形式:

  1. 目标文档为下载资源 例如:href属性值,指定的文件名称,就是下载操作(rar、zip等)
  2. 电子邮件链接 前提:计算机中必须安装邮件客户端,并且配置好了邮件相关信息。 例如:联系我们
  3. 返回页面顶部的空链接或具体id值的标签 例如:内容内容
  4. javascript:是表示在触发默认动作时,执行一段JavaScript代码。 例如:内容
  5. javascript:;表示什么都不执行,这样点击时就没有任何反应 例如:内容

四 列表标签 ul,ol

网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟

  • 标签一起用,每条li表示列表的内容

      :unordered lists的缩写 无序列表
        :ordered listsde的缩写 有序列表

        
            
            
        • 我的账户
        • 我的订单
        • 我的优惠券
        • 我的收藏
        • 退出
        打开网页样式如下图: ![DL.PNG](https://upload-images.jianshu.io/upload_images/24072767-862eedf87cbe0ae8.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        1. 我的账户
        2. 我的订单
        3. 我的优惠券
        4. 我的收藏
        5. 退出
        有序列表如图所示 (https://upload-images.jianshu.io/upload_images/24072767-f8cd528ed8afc54d.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ol标签的属性: type:列表标识的类型 * 1:数字 * a:小写字母 * A:大写字母 * i:小写罗马字符 * I:大写罗马字符 列表标识的起始编号 * 默认为1 ul标签的属性: type:列表标识的类型 * disc:实心圆(默认值) * circle:空心圆 * square:实心矩形 * none:不显示标识 五 盒子标签 `div` `
        `可定义文档的分区 division的缩写 译:区 `
        ` 标签可以把文档分割为独立的、不同的部分,请看下面代码我们将他们进行分区





        常用标签一




        段落


            
            
            

        路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能

        路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能

        路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能

        • 我的账户
        • 我的订单
        • 我的优惠券
        • 我的收藏
        • 退出
        1. 我的账户
        2. 我的订单
        3. 我的优惠券
        4. 我的收藏
        5. 退出


        
        分析上面代码可以下面的层次结构
        
        






        
        我们将文档放在一个父级的区(div)中,它里面包含四块区(div)域,浏览器查看效果,你会发现每小块区域都是独占一行的,所以div是块级元素。另外,每块区域表示独立的一块,id属性和class属性其实很简单,你可以看成给这个区域起个名字。id是唯一的,一个页面中不能有两个重复的id,跟身份证号码一样,class可以设置同样的属性值,并且可以设置多个,例如class=’para n1‘
        
        六  图片标签 ``
        
        一个网页除了有文字,还会有图片。我们使用``标签在网页中插入图片。
        
        语法:`图片加载失败时显示的内容`
        ![src.png](https://upload-images.jianshu.io/upload_images/24072767-427f52a283238f98.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
        
        注意:
        
        1.  src设置的图片地址可以是本地的地址也可以是一个网络地址。
        2.  图片的格式可以是png、jpg和gif。
        3.  alt属性的值会在图片加载失败时显示在网页上。
        4.  还可以为图片设置宽度(width)和高度(height),不设置就显示图片默认的宽度和高度
        
            ```
             
        与行内元素展示的标签 与行内元素展示的标签 金融量化分析 人工智能实战
        ``` 浏览器查看效果:行内块元素 5. 与行内元素在一行内显示 6. 可以设置宽度和高度 7. span标签可以单独摘出某块内容,结合css设置相应的样式

        路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能

        
        好的,同学们,此时大家是不是对于以上标签有所认知了呢? 这样吧!我来出一个小练习,你来做! 练习:将img标签中的图片独占一行展示,并设置设置相应标题,在图片下方,描述该图片内容的信息。
        
        ## 其他标签
        
        #### 换行标签 `
        ` `
        `标签用来将内容换行,其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。 #### 分割线 `
        ` `
        `标签用来在HTML页面中创建水平分隔线,通常用来分隔内容 #### 特殊符号 浏览器在显示的时候会移除源代码中多余的空格和空行。 所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML代码中的所有连续的空行(换行)也被显示为一个空格。 举个例子:





        路飞学城

            

        帮助有志向的年轻人 通过努力学习获得 体面的 工作 和 生活!

        
        上面的代码在浏览器中最终的显示效果:
        
        [图片上传失败...(image-c4d9e-1600085645105)]
        
        > 所以HTML代码对缩进的要求并不严格,我们通常使用缩进来让我们的代码结构更清晰,仅此而已。
        
        ### 特殊字符
        
        在上一个实例中,我们演示了HTML中输入空格、回车都是没有作用的。要想输入空格,需要用特殊符号 -- ` `。
        
        
        
        ### 表格标签 table
        
        表格由`` 标签来定义。每个表格均有若干行(由 `` 标签定义),每行被分割为若干单元格(由`
        `标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等 ![table.png](https://upload-images.jianshu.io/upload_images/24072767-9ee53c48076fcf74.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)





























        
        表格行和列的合并
        
        

        rowspan 合并行(竖着合并)
        colspan 合并列(横着合并)

        
        





































































        星期一 星期二 星期三 星期四 星期五
        上午 语文 数学 英文 生物 化学
        语文 数学 英文 生物 化学
        语文 数学 英文 生物 化学
        下午 语文 数学 英文 生物 化学
        语文 数学 英文 生物 化学
        课程表


        
        ### 表单标签 form
        
        表单是一个包含表单元素的区域
        表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、输入框(input)、单选框()
        
        ### 表单的作用
        
        表单用于显示、手机信息,并将信息提交给服务器
        
        1.  语法:
        
        

        允许出现表单控件

        
        1.  属性 见下图:
        ![1226410-20180701102109370-413468924.png](https://upload-images.jianshu.io/upload_images/24072767-7453668c6d56b3ac.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
        
        2.  表单控件分类 见下图
        (https://upload-images.jianshu.io/upload_images/24072767-c46c198aaa13134b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
        
        





        用户名称:



        用户密码:



        确认密码:




        用户性别:





        用户爱好:吃













        请上传文件:




        自我介绍:




        籍贯:



        意向工作城市:


        最后效果代码最终效果如下图所示
        (https://upload-images.jianshu.io/upload_images/24072767-d3ece2b59b15f5b4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
        

        你可能感兴趣的:(html:常用标签)