HTML概述、基本语法(表格整理、标签、基本结构)

陈咕咕咕咕

已于 2024-01-17 12:11:52 修改

阅读量896

点赞数 18

文章标签： html 前端

于 2024-01-17 12:07:19 首次发布

本文链接：https://blog.csdn.net/2303_77522514/article/details/135646709

版权

一、HTML概述

HTML指的是超文本标记语言
- 超文本：是指页面内可以包含图片、链接、声音、视频等内容
- 标记：标签（通过标记符号来告诉浏览器页面该如何显示）
我们可以打开浏览器，右击页面，点击查看网页源代码，来方便了解HTML标签通过浏览器解析称为网页的这一过程。
例如Microsoft Edge
HTML文档的声明

我们会发现很多页面源代码都会出现<!DOCTYPE html>，这是HTML5文档的声明。如果不声明文档类型会产生一些不可预期的行为。除了HTML5文档的声明：<!DOCTYPE html>还有HTML4的文档声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

二、HTML基本语法

基本结构
标签

HTML中的标记指的是标签。HTML使用标记标签来描述网页。
- 结构:<标签名>标签内容</标签名> 闭合标签(有标签内容)
  
  <标签名/> 自动闭合标签(无标签内容)
- 标签属性：标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。如:<body text="red">
  1. 属性的格式:属性名="属性名"
  2. 属性的位置：<标签名属性名="属性值">xxx</标签名>
  3. 添加多个属性:<标签名属性名="属性值" 属性名="属性值">xxx</标签名>
常用标签
- 标题标签：<h1></h1>…..<h6></h6>
  
  如：
```
<h1>HTML在线考试题</h1>
```
- 段落标签：<p></p>
  
  如：
```
<p align="center">静夜思是诗人李白所做的一首五言古诗</p>
```
- 换行标签:
- 列表:无序列表<ul><li></li></ul>
  
  有序列表<ol><li></li></ol>
  
  如：
```
列表
         无序列表
          <ul type="square">
               <li>列表项1</li>
               <li>列表项2</li>
               <li>列表项3</li>
               <li>列表项4</li>
          </ul>
         有序列表
           <ol type="1">
               <li>列表项1</li>
               <li>列表项2</li>
               <li>列表项3</li>
               <li>列表项4</li>
           </ol>
```
  结果:
- 超链接: <a></a>
  
  HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是通过连接来访问其他网页资源。
- 图像标签：<img/>
  
  注意图片的路径最好放在HTML文档的同一路径，或者同一路径下的文件夹内。
- 特殊符号转义
  
  在HTML中预留了一些字符。这些预留字符是不能在网页中直接使用的。
  
  比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。
  
  例如：<b> 会被解析为b标签，空格,再多的空格都会当一个空格处理。
  
  为了可以使用这些预留字符，我们必须在html中使用字符转义。
- 表格(有例子方便理解)
  1. 表格的标签
    
    table标签:表格的标签
    
    tr标签:表格中的行
    
    th标签:表格的表头
    
    td标签；表格单元格
  2. 表格的基本结构
    定义表格
  3. 表格属性
    
    width设置宽
    
    height:设置高
    
    align:设置对齐位置
    
    cellspacing:表格单元格间距设置
    
    cellpadding:规定的是单元边沿与单元内容之间的空间。
    
    valign:规定单元格中内容的垂直排列方式。
    
    cospan：单元格应跨越的列数(可以理解为合并列数)。
    
    rowspan:单元格应跨越的行数(可以理解为合并行数)。
    
    bgcolor:设置单元格的背景颜色。

表格例子：

创造一个有如下效果的表格（要用到:align左对齐，中央对其。cellspacing,cellpadding,bgcolor等属性）

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
        <!-- 
            table-- 表格标签
               border="1" 边框宽度
               width="400" 表格宽度
                cellspacing="0" 设置单元格与单元格之间的距离
                cellpadding="0" 设置单元格内容到边框的距离
            tr -- 表格行 
                    align="left / center / right"   水平位置
                    valign="top / middle /bottom"  垂直位置
            th -- 单元格(表头  居中 加粗)
            td -- 普通的单元格
                   align="center" 
                   valign="middle"
             表格中的内容只能放在单元格
         -->
        
        <table border="1" cellspacing="0" cellpadding="0">
            <tr bgcolor="red">
                <th width="150"  height="50" >姓名</th>
                <th width="100">语文</th>
                <th width="100">数学</th>
                <th width="100">英语</th>
            </tr>
            <tr>
                <td bgcolor="green" height="50" align="center" valign="middle">张三</td>
                <td>90</td>
                <td>80</td>
                <td>70</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>90</td>
                <td>80</td>
                <td>70</td>
            </tr>
            <tr align="center" valign="bottom"  height="50">
                <td>王五</td>
                <td>90</td>
                <td>80</td>
                <td>70</td>
            </tr>
        </table>
        
    </body>
</html>

陈咕咕咕咕

关注

18
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
HTML概述、基本语法(表格整理、标签、基本结构)

超文本：是指页面内可以包含图片、链接、声音、视频等内容标记：标签（通过标记符号来告诉浏览器页面该如何显示）我们可以打开浏览器，右击页面，点击查看网页源代码，来方便了解HTML标签通过浏览器解析称为网页的这一过程。例如Microsoft Edge。
复制链接

扫一扫