请写出至少5个html块元素标签_HTML前端基础学习二(全,文末另附有css及js学习链接)...

最新推荐文章于 2022-05-24 22:26:38 发布

出门见熹

最新推荐文章于 2022-05-24 22:26:38 发布

阅读量298

点赞数

文章标签：请写出至少5个html块元素标签

本文链接：https://blog.csdn.net/weixin_33477210/article/details/112558013

版权

HTML基础

一.HTML是什么?

1.超文本标记语言（HyperText Mark-up Language ）(有时面试官脑抽会问这个!)

2.用来设计网页的标记语言

3.用该语言编写的文件，以 .html或 .htm为后缀

4.由浏览器解释执行

5.不区分大小写，建议小写

二.HTML标签标签

1.HTML用于描述功能的符号成为“标签”

2.标签都封装在一对尖括号“<...>”之中,如<html>就是一个标签

3.封闭类型标记（也叫双标记），必须成对出现,如<p></p>

4.非封闭类型标记，也叫作空标记，或者单标记，如<br/>

三.HTML元素

指的是从开始标签（start tag）到结束标签（end tag）的所有代码

HTML 元素语法

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容（empty content）

空元素在开始标签中进行关闭（以开始标签的结束而结束）

大多数 HTML 元素可拥有属性

四.HTML属性与值

1.属性是用来修饰元素的

属性必须位于开始标签里

一个元素的属性可能不止一个，多个属性之间用空格隔开

多个属性之间不区分先后顺序

2.每个属性都有值

属性和属性的值之间用等号链接

属性的值包含在引号当中

属性总是以名称/值对的形式出现

五.注释

1.为代码添加适当的注释是一种良好的编程习惯

2.注释只在编辑文本情况下可见，在浏览器展示页面是并不会显示

3.注释标签不支持任何属性

4.语法：

六.HTML基本结构

<head lang="en">

lang是language的意思，lang=”en”属性对每张页面中的主要语言进行声明，en代表了英文，只是个声明，声明了它，对搜索引擎和浏览器更友好，并不会更改显示内容。它还有常见的值是zh-CN，代表了中文。（搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你的站点是中文站，这些都是html规范，越规范，越容易被收录）

2. <meta charset="UTF-8">

META标签用来描述一个HTML网页文档的属性，此处的charset=”utf-8”是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式。国外一般会用gbk、gb2312，国内通常使用utf-8。

3. <html>

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

<html>

4. <head>

<title>我的第一个 HTML 页面</title>

</head>

5. <body>

<p>body 元素的内容会显示在浏览器中。</p>

</body>

</html>

七. 基本标签总结

<head>

标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：

<title>、<meta>、<link>、<style>、 <script>。

应该把 <head> 标签放在文档的开始处，紧跟在 <html> 后面，并处于 <body> 标签之前。

文档的头部经常会包含一些 <meta> 标签，用来告诉浏览器关于文档的附加信息。

2. <title>

1.可定义文档的标题。

2.它显示在浏览器窗口的标题栏或状态栏上。

3.当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称。

4.<title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title，不是说其它的不加，而是title一定要加。

5.title写和你网页相关的关键词有利于SEO优化

<html>
<head>
	<title>我会显示在收藏栏里</title>
</head>
    <body>...</body>
</html>

3. <meta>

元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。

常见的meta有

Keywords(关键字)　keywords用来告诉搜索引擎你网页的关键字是什么。

description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。

author作者标注网页的作者

4. 嵌套标签

标签之间可以相互嵌套，但要注意嵌套顺序

5.语义化标签

语义化标签

语义化：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上文章的标题就可以用标题标签 h1-h6,段落用p,地址用address等

好处：

1. 更容易被搜索引擎收录

2. 更容易让屏幕阅读器读出网页内容

6. 图片

1.使用<img>元素将图像添加到页面

2.空标记

3.必须属性：src（存储图像的位置）

4.常用属性：width，height，alt，title

	<img src="URL(即图片地址,本地地址或者网络地址)" width="300" alt=”替换文本属性”/>

title定义了鼠标经过图片时显示的内容，搜索引擎抓取图片时，是根据title定义的内容来分析图片是什么的

alt当图片未能正常显示时，用于给用户的提示信息

width:水平线的长度可取像素px值和百分比%

height:高度 px值

border:边框 px值

align: 对齐方式所有块元素都可以使用这个属性,默认居中

top 图片和同行元素垂直方向的对齐方式

botton 默认底部对齐

center 居中

left 对齐当这一行的最左边

right 对齐当这一行的最右边

7. 超链接

1.使用<a></a>元素创建一个超链接,点击可以跳转到另一个界面

2.语法：

a) href属性：链接URL,相对地址, 绝对地址

<a href="www.baidu.com"  target="_blank"  title=”这儿是百度地址”>百度搜索</a>

target属性：目标，可取值_blank(新页面打开),_self( _self 本页面打开)等

name属性：锚点名称

title属性：定义了当鼠标悬停在内容上时候显示的提示字

b) h* 标题标签

h1~h6 从权重的减小字体大小依次减小

    <h2>你好</h2>
    <h3>哈哈</h3>
    <h4>哈哈</h4>

字体加粗大小不同

块元素

c) p 段落标签常用来定义段落,文章内容

<p>我来自江苏泰兴
      我姓鲁
         我很帅
    </p>

块元素

正常显示

前后留白--margin外边距

换行和多个空格识别成为一个空格

d) 块元素可有嵌套块元素和行内元素

行内元素只能嵌套元素和普通文本

div 块

<div>
        我是一个div
        <p>我是一个子元素p标签</p>
        <a href="#">回到顶部不刷新</a>     

    </div>

块元素

正常显示

span 便于控制样式

<p>我是一个 <span style="color:pink">粉</span>刷匠</p>

行内元素

正常显示其内容

e) 无序列表

ul 定义无序列表

li 定义列表项

列表项标记 type

disc 默认实心远点

circle 空心圆圈

square 实心方块

<ul type="square">
        <li>鸡蛋炒刀削</li>
        <li>砂锅面</li>
        <li>干锅土豆片</li>
        <!--<div>黄焖鸡</div>-->
        <li>
            <div>哈哈</div>
            <ul>
                <li>呵呵</li>
            </ul>
        </li>
    </ul>

f) ol有序列表

li 定义列表项

列表项标记 type

可以有 1 A a I i 类型

 <h2>最不喜欢的食物</h2>
    <ol type="A">
        <li>红烧牛肉面</li>
        <li>康师傅的红烧牛肉面</li>
        <li>统一的红烧牛肉面</li>
    </ol>

g) 表格标签

表格 table

table 表格标签

tr 行

表格行的常用属性

th 表个头单元格加粗+居中

td 表格体单元格,表格列

表格列的常用属性

属性:

align 对其方式所有块元素能使用的align属性

right

left

center

width 块

height 高度

border 边框

bordercolor 边框颜色

bgcolor 背景颜色

rowspan 跨行

colspan 跨列

style="border-collapse:collapse"单线变双线

table标签常用属性

代码如下,建议初学者细细分析.

    <table border="1" style="border-collapse:collapse" align="center" width="500px" height="350px" bordercolor="pink">
        <tr>
            <th colspan="6">课程表</th>
        </tr>
        <tr>
            <th></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr  align="center">
            <td rowspan="3">上午</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
        </tr>
        <tr  align="center">
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
        </tr>
        <tr  align="center">
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
        </tr>
        <tr  align="center">
            <td rowspan="2">下午</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
        </tr>
        <tr  align="center">
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
        </tr>
        <tr>
            <td colspan="6" align="center">晚自习</td>
        </tr>
    </table>
</body>
</html>