HTML入门

abberr

于 2021-10-21 16:52:00 发布

阅读量398

点赞数

CC 4.0 BY-SA版权

文章标签： html 前端

本文链接：https://blog.csdn.net/abberr/article/details/120884620

这篇博客介绍了HTML的基本概念，包括HTML的定义、标签分类、基本结构和常见标签的使用，如标题、段落、图片和表格，并讲解了如何通过CSS来美化表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

1 HTML基本概念

1.1 HTML是什么？

HyperText Markup Language: 超文本标记语言

HTML 指的是超文本标记语言（HyperText Markup Language）
HTML 不是一种编程语言，而是一种标记语言markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

1.2 标签（tag)

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词构成，通常是成对出现的
<html> </html>
标签对中的第一个标签是开始标签，第二个标签是结束标签，也被称为开放标签和闭合标签

1.3 HTML基本结构

<html>
	<head>
		   <title>
		        文本
           </title>
		   <style>
		       属性
		   </style>       
         <body>       
                html的主体内容
         </body>
</html>

1.4 前端案例

<html>
   <head>
      <title></title>
  </head>
 <body>
    <h1>这是我的第一个html标签</h1>
    <h2>这是我的第一个html标签</h2>
    <h3>这是我的第一个html标签</h3>
 </body>
</html>

2 HTML基础

2.1 标签分类

2.1.1 双标签

<h1>双标签</h1>

2.1.2 单标签

<br/>  <hr/><!--单标签-->

2.2 特殊符号

某些特殊符号的表示方式，基本格式<&十六进制 ; >或者<&英文单词;>

&nbsp;

html	显示	含义
<	<	小于号或者标记
>	>	大于号或者标记
&	&	&符号
"	"	英文引号
®	®	已注册
©	©	版权
™	™	商标
		一个英文空格
•	•	中间的点号

2.3 HTML 注释

<!-- -->

3 HTML常用标签

3.1 标题标签 h1

HTML 标题是通过 < h1>~ < h6> 等标签进行定义的。

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

3.2 段落标签

段落标签< p> < /p>

3.3 换行标签< br/>

换行标签

3.4 水平线标签< hr>

在页面上绘制一条水平线

<p>测试水平线1</p>
<hr/>
<p>测试水平线2</p>

在这里插入图片描述

3.5 图片标签< img>

在页面上显示图片

<img src="" tittle="" alt=""/>

3.5.1属性

src: 图片地址

绝对路径：
windows:从盘符到图片的全部地址
linuex:从根目录出发
相对地址
用的最多

../images/test.jpg
<!-- ../指上一级目录    ./当前目录  -->

网络地址URL

https://m.360buyimg.com/babel/jfs/t1/156222/24/25759/1892/61700e55E8b4b86db/95a9677909b68616.png

2.title

当鼠标移入图片时提示

3.alt

当图片无法显示是，显示alt中文字

3.5.2图片css常用属性

width:宽度
height:高度
border：边框
border-radius:边框弧度

img{
   width: 300px;	/*图片宽度*/
   height: 300px;	/*图片高度*/
   border: 3px red solid;  /*边框宽度: 3px, 颜色: red, 线条: 实线*/
   border-radius: 150px 150px; /* 以x方向150px, y方向150px 画弧线 */
}

3.6 表格标签 <table>

3.6.1 相关标签

<table>   <!--  表格  -->
<caption>   <!--表格简介-->
<thead>   <!--表头(标题, 字段名称)--->
  <tr>    <!--行标签-->
    <th>    <!--单元格-->
 <thead>   
<tbody>   <!--表体-->
  <tr>
    <td>
<tfoot>   <!--表脚(分页)--->

     <table >
    <caption>图书 表格</caption>
    <thead>
        <tr>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>价格</th>
            <th>封面</th>
            <th>出版商</th>
            <th>推荐人选</th>
            
            
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>西游记</td>
            <td>吴承恩</td>
            <td>神话出版社</td>
            <td>88.88</td>
            <td>上海友邻出版社</td>
            <td>
                <img src="../images/西游记.jpg" alt="西游记封面">
            </td>
            <td rowspan="2">所有人</td>
           
        </tr>  
        <tr>
            <td>三国演义</td>
            <td>罗贯中</td>
            <td>历史出版社</td>
            <td>98.88</td>
            <td>农业银行出版社</td>
            <td>
                <img src="../images/三国演义.jpg" alt="三国演义封面">
            </td>
           
        
           
        </tr>    
        
    </tbody>
    <tfoot>
            <td colspan="7">本表格由dddd出品</td>
    </tfoot>
  <table>

在这里插入图片描述

3.6.2单元格合并

列合并 colspan=“列数量”
```
<td colspan="7">
```
行合并 rowspan=“行数量”
```
<td rowspan="2">所有人</td>
```
表格案例

3.6.3 表格常用CSS

3.6.3.1 表格的大小

width：宽度

px
%

height: 高度

 table{
            /* width: 800px; */
            width: 100%;
        }

3.6.3.2 表格的位置

 table{
            /* width: 800px; */
            width: 50%;
            /*
              margin-left:auto;
              margin-right: auto; 
     		*/
            margin: 0 auto 0 auto;   /*  top right bottom left*/          
        }

3.6.3.3 表格的边框

border-collapse: collapse; /边框合并/

在这里插入图片描述

边框的宽度: border-width:
border: 5px black solid;

3.6.3.5 字体(font-)

 caption{
        font-size: 2em;
        font-family: "华文行楷";
        font-weight: border;
        font-style:italic; /*斜体*/
        color: rgb(14, 122, 0);
    }

3.6.3.6 背景(background-)

body{
        background-color: rgb(179, 96, 41); 
        background-image: url('../images/西游记.jpg');
        background-repeat: no-repeat;/*图片重复*/
        background-size: cover;/*背景大小*/
    }

在这里插入图片描述

3.6.3.7 伪类效果

当鼠标移动到表格某行的时候，当前行显示不同的背景

/*伪类*/
tr:hover{
    background-color: lightblue;
    cursor: pointer;
}

3.7 视频/音频标签

 <video width="500" height="400" controls="controls">
                    <source src="../images/kkA350.mp4" type="video/mp4" />
                  </video>

在这里插入图片描述