潭州学院html学习（day02）

阅读量：5030 次

发布时间：2019-06-12

本文共 4432 字，大约阅读时间需要 14 分钟。

补充

<html>标签：

标记标签通常被称为HTML标签（html tag）

由尖括号组成的关键词，比如<html>

标签成对出现，第一个开始标签（开放），第二个结束标签（闭合）。比如<head></head>标签必须闭合。

单标签加“/”闭合。如：<meta>,也可以不加，如：<meta>

html标签属性：能赋予标签一些作用，格式为：属性名="属性值"的格式写在开始标签内，同一个标签可以有多个标签属性，如下meta标签的，charset,name,content,html的标签lang，都是标签属性，在这里meta标签通过不同的标签属性起到了不同的作用。

注释：注释相当于说明书，与主要内容的解析没有任何作用，注释的任何内容不会出现在浏览器中，就像电视的说明书一样，对电视机的作用，参数做出解释

html里面的注释：

css里面的注释： //单行注释

*/多行注释

HTML中注释的快捷键：Ctrl+/

一.html基本标签分类（本文许多内容引用自0&，链接https://www.cnblogs.com/sin0/p/7041248.html）

HTML标签的分类：

块级标签：显示为块状，独占一行，自动换行。

行级标签：在一行中，从左往右依次排序，不会自动换行。

【行级标签和块级标签的区别：】

1、块级标签：默认宽度100%（占满一行）；

块级标签自动换行（独占一行，右边不能有任何东西）；

可以使用css设置宽度高度

2、行级标签：默认宽度由内容撑开（内容多宽，宽度就占多宽）；

行级标签不会自动换行（一行当中，从左往右依次排列）；

宽度高度不能设置

从写法上，HTML标签分为“成对标签”和“自闭和标签（空标签）”

①成对标签：成对出现，有开始标签，必须有结束标签，内容包含在两个标签之间。

例如<h1></h1>

②自闭和标签（空标签）：只有一个标签，用/表示标签的自闭和（/可以省略）

例如<link/><meta/><hr/>

二.基本块级标签

标题标签

h标签：标题标签，显示为黑体加粗。

标题标签，共分为6种：h1——h6，h1为大，h6最小

分割线标签

hr标签：显示为一条水平线

段落标签

p标签：段落标签，相当于文章里面的一段文字

换行标签

</br>标签：换行符

注意：在代码中，直接回车换行，浏览器并不认识，必须使用<br/>告诉浏览器这里要断行

预格式

pre标签：预格式标签。会保留代码中的空格，回车等符号，直接在浏览器显示

pre标签常用于在网页中显示代码，保留代码格式！！

块引用标签<blockquote cite="http://www.baidu.com"></blockquote>

blockquote：块引用标签。表明一段话是从其他网站引用的

有一个重要属性：cite=""表示这段话的引用来源，常放一个网站地址，但是浏览器显示并没有任何区别

三.基于布局的块级标签

1、无序列表

有多个列表项组成，每个列表项前面带小黑点，称为无序列表。

无序列表用<ul>表示，列表中的每一项用<li>表示

2.有序列表

有序列表用<ol>表示，标签中的每个列表项用<li>表示

3、定义列表（定义描述列表）

定义列表<dl>，里面有一个标题<dt>，有多个描述项<dd>，

标题默认顶格显示，描述项相对标题向后缩进显示。

4、图片组合标签

组合标签<figure>里面有两部分：

①图片<img/>后续讲解

②图片的标题<figcaption></figcaption>

5、分区标签div（最常用标签）

div标签没有任何的特殊作用，仅仅起到一个包裹内容的作用。常用于网页中划分区块

div标签中可以包裹任何内容，需配合css一起使用

四.基本行级标签

span标签：

只是包裹作用，没有其他任何含义

span和div一样，需配合css使用。不过div是块级标签，span是行级标签

【em/strong i/b区别】

①em和i都能倾斜，strong和b都能加粗。但是，i和b仅仅是单纯的倾斜加粗，而em和 strong多了强调的语义。

②em和strong都表示强调，但是strong强调的级别更高

注意：

①强调的目的：让搜索引擎知道网页重点强调的内容！便于搜索引擎显示！

②strong和em都可以多层嵌套，表示强调程度的递增！

超链接标签a

① href属性：表示超链接需要跳转的页面

a.可以写网络地址：

<a href="http://www.baidu.com">这是一个超链接</a>

b.可以打开本地html文件：

采用相对路径确定文件地址，与img标签确定方式相同

<a href="02-HTML-基本块级标签.html">这是一个超链接</a>

② title属性：鼠标指上后显示的提示文字

<a href="http://www.baidu.com"title="hhh">这是一个超链接</a>

③ target属性：设置新页面打开的窗口位置

可选值：_self自身页面打开（默认）_blank新窗口打开

<a href="http://www.baidu.com"target="_blank">这是一个超链接</a>

④ rel属性：声明即将跳转的文件与当前文件的关系

rel="prev":即将打开的页面是当前页面的前一篇；

rel="next":即将打开的页面是当前页面的后一篇

<a href="next.html"rel="next">下一篇文章</a>

这个属性设置以后对用户没有任何作用，但多搜索引擎是友好的，搜索引擎在抓取网页时，可以很清楚的知道网页中的上下文结构关系

【超链接的特殊应用】

1.功能性连接（了解）：

mailto://点击链接给指定邮箱发送邮件

<a href="mailto://jianghao@jrel.com">点击链接发封邮件</a>

tencent://message/?uin=251241143点击与指定QQ聊天

还有：tell://手机端点击打电话

message://手机端点击发送短信

ftp://使用ftp协议进行文件的上传下载

2.锚链接：

>>>本页面锚链接

①在页面的指定位置设置一个锚点，用name属性表示锚点的名字

②将超链接的href属性，设置为#加锚点名字

<a href="#top">点击链接，跳转到top锚点位置</a>

>>>页面间锚链接

①在新页面的指定位置设置一个锚点，用name属性表示锚点的名字

②将超链接的href属性，设置为新页面地址#加锚点名字

<a href="text.html#top">点击链接，跳转到text.html的top锚点位置</a>

四.CSS

在浏览器里面以px为单位，标签有标签属性，同时也有css属性

css属性写法：

属性: 值; (冒号和分号统统用英文状态下的符号)

常见的css属性：

height: 50px; //宽度

width: 200px; //高度

background: green; //背景

color: #fff; //字体颜色颜色值可以用英文单词书写

font-size: 30px; //字体的大小

样式分类：

行内样式：style="height: 50px; width: 200px; background: green; color: white;"

内部样式(css属性的写法和行内一模一样)：

<style>

h2(选择器){

height: 50px;

width: 200px;

background: green;

color: #fff;

}

</style>

更提倡内部样式写法：模块化

基本的选择器：

标签选择器：标签名

class类选择器：好比每个人的小名，可以有很多个

这是h1标签

这是h2标签

这是h3标签

这是h4标签

这是h5标签

这是h6标签

这是一段文字这是一段文字这是一段文字

             这是一段文字                    这是一段文字                    这是一段文字                    这是一段文字

光明正大的抄你的！

            
                             
                 
      这是无序列表第一项
            
      这是无序列表第二项
            
      这是无序列表第三项
            
      这是无序列表第四项
        
     
        
                 
      这是有序列表第一项
            
      这是有序列表第二项
            
      这是有序列表第三项
            
      这是有序列表第四项
        
                  
       
        这是dl列表的标题
       
            
       
        这是dl列表的描述项1
       
            
       
        这是dl列表的描述项2
       
            
       
        这是dl列表的描述项3
       
                
      
        
                  
                   
       
        图片的描述标题
       
        
      
        
      
                   这是div里面的文字            
       11111