HTML的基本语法-CSDN博客

本文链接：https://blog.csdn.net/qq_72405586/article/details/134610617

HTML

html文件是浏览器负责解析和展示的

HTML

基础结构

根标签：

<html>文件的根标签，<html></html>所有的其他标签都要在这个标签中间

html根标签下有两个一级子标签

头部元素

<head></head>:头标签，定义那些不直接展示，但又很重要的内容

主体元素

<body></body>体标签，定义要展示在页面中的内容

指定字符集

文档声明

<!DOCTYPE html>

专业词汇

标签：页面中的一对<>

属性：对标签特征进行设置的一种方式，属性一般在开始标签定义

文本：双标签中间的文字

元素：开始标签+属性+文本+结束标签称之为一个元素

常见标签

标题标签

<h1>~<h6> 标题标签号越大，字体越小

段落标签

p是段落标签

换行标签

<br/>是普通换行，是单标签

<hr/>是带分割线的换行，也是单标签

列表标签

有序列表 ol 无序列表 ul 列表项 li

列表标签之间也可以进行嵌套

<!--
 有序列表
-->
<ol>
  <li>数据结构</li>
  <li>面向对象</li>
  <li>变量</li>
  <li>函数</li>
</ol>
<!--
无序列表
-->
<ul>
  <li>JAVA</li>
  <li>C</li>
  <li>C#</li>
  <li>php</li>
</ul>

超链接标签

a标签：

href属性：用于定义跳转的目标资源的地址
target属性：用于定义目标资源的打开方式

- _self：在当前窗口打开目标资源
- _blank：重新开启新窗口打开目标资源

相对路径：以当前资源为出发点去找目标资源

./：表示的当前资源所在的路径，可以省略不写

../：表示当前资源的上一层路径，需要时必须写出

绝对路径：无论当前资源在哪里，使用固定的位置作为出发点去找目标资源，以/开头

图片标签

img标签

src属性定义图片的路径
title属性定义鼠标悬停时提示的文字
alt属性定义图片加载失败时提示文字

表格标签

table：整个表格

thead 表头
tbody 表体
tfoot 表尾

tr表示表格中的一行

td表示表格一行中的每一个单元格

th自带加粗居中效果的td

td中有两个属性：

rowspan：把该单元格向下拓展多少列
colspan：把该单元格向右拓展多少行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>员工技能竞赛评分表</h3>
    <table>
        <thead>
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>分数</th>
            </tr>
            
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <th>张小明</th>
                <th>100</th>
            </tr>
            <tr>
                <th>2</th>
                <th>李小东</th>
                 <th>99</th>
            </tr>
             <tr>
                <th>3</th>
                <th>王小虎</th>
                <th>98</th>
             </tr>
        </tbody>
    </table>
</body>
</html>