HTML标签及css_td外层除了是tr还可以是其他标签吗-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42689450/article/details/82120642

本文介绍了HTML相关知识，包括其是超文本标记语言，俗称网页。阐述了HTML文件结构，以.html 或.htm 结尾，标签成对出现等。还列举了常用标签，如标题、段落、图片、超链接等，以及宽高、边框属性的设置方法。

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

html

1. 什么是html

hyper 超级 text 文本 markup 标记 language 语言
超文本标记语言，俗称网页

2. html 文件结构

以 .html 或 .htm 结尾的文本文件

1) 标签一般成对出现：<标签名> </标签名>
2) 最外层的标签<html></html> 其它标签必须在它之内
3) doctype 用来说明html的版本
例如：版本是html5

<!DOCTYPE html>

版本是html4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

3) <html> 标签由 <head> 和 <body> 子标签组成

<html>
    <head></head>
    <body></body>
</html>

head标签主要用来引入外部的样式和脚本文件, 还可以用来定义编码和标题
主要的是网页中与内容无关的部分

3. 常用标签

3.1 标题标签

…

标题从1到6，字号依次减小

3.2 段落标签（正文）

可以起到内容换行的作用，普通文本是不会自动换行的 3.3 分隔符

不需要结束标签, 加一道横线换行符
不需要结束标签, 起到换行的作用 3.4 标签的属性: 格式：属性名=”属性值” 可以用来定义标签的宽、高、颜色等等例如：

<p align="right">内容</p> 表示段落内容靠右对齐

<hr color="red">  表示分隔符颜色变为红色

3.5 图片标签 img
src 属性代表图片路径
更多注释内容
alt 是图片访问不到时的提示文字
width 表示宽度（单位是像素）
height 表示高度（单位是像素）

3.6 超链接 a 【重点】
href 属性表示跳转的目标
方式1:两个网页之间跳转：

<a href="目标网页的地址">超链接提示文字</a>

方式2：网页内跳转 (锚点)

<a href="#另一个标签的id值">超链接提示文字</a>

方式3：图片作为超链接

3.7 列表
有序列表 (order)

<ol>
   <li>列表项</li>
</ol>

无序列表 (unorder)

<ul>
   <li>列表项</li>
</ul>

在这里无序列表可以嵌套有序列表，有序也可以嵌套无序

<ol>
  <li>
   <ul>
   <li>列表项</li>
   </ul>
</li>
</ol>

3.9 表格【重点】

<table>
    <thead></thead>  头
    <tbody></tbody>  体
    <tfoot></tfoot>  脚
</table>

其中 thead, tbody, tfoot 里又可以分为行与列
<tr> 表示行 ‘’ 表示列
比如要在tbody再分两行两列

<tbody>
    <tr>
        <td>第一列</td><td>第二列</td>
    </tr>
    <tr>
        <td>第一列</td><td>第二列</td>
    </tr>
</tbody>

例：

<table border="1" width="100%">
    <!--标题-->
    <thead>
        <tr>
            <td>编号</td><td>姓名</td>
        </tr>
    </thead>
    <!--内容-->
    <tbody>
        <tr>
            <td>1</td><td>张三</td>
        </tr>
        <tr>
            <td>2</td><td>李四</td>
        </tr>
    </tbody>
</table>
<hr>
<table border="1" width="100%">
    <tr>
        <td>第一列</td><td>第二列</td>
    </tr>
    <tr>
        <td>第一列</td><td>第二列</td>
    </tr>
</table>
<hr>

生成表格的父子关系，4行3列
table>tbody>tr*4>td*3

同时生成thead和tbody 需要用() 把他们分组，平级的用+连在一起
table>(thead>tr>td*3)+(tbody>tr*4>td*3)

给table加属性的快捷写法
table[border=1][width=100%]>tbody>tr*2>td*2

<!-- 合并列 -->
<table border="1" width="100%">
    <tbody>
    <tr>
        <!--colspan=2 将两个td合并为一个-->
        <td colspan="2">行1列1</td>
        <td>ss</td>
    </tr>
    <tr>
        <td>行2列1</td>
        <td>行2列2</td>
        <td>行2列3</td>
    </tr>
    </tbody>
</table>

<!-- 合并行 -->
<table border="1" width="100%">
    <tbody>
    <tr>
        <td rowspan="2">行1列1</td>
        <td>行1列2</td>
    </tr>
    <tr>

        <td>行2列2</td>
    </tr>
    </tbody>
</table>

与<td>类似的’’，他们都是代表一列，但’’其中的文本默认是居中并加粗

3.10 表单【重点】
都是用来收集用户录入的信息
<input type="text"> 文本框标签
<input type="password"> 密码框
<input type="radio"> 单选按钮

例子：

<!-- name取值相同的单选按钮视为同一组 
         checked 表示是否默认选中， 对于这种取值只有“是否”这两种情况的属性， 有两种写法：一种是只写属性名，另一种是名="值"
    -->
    <p>男<input type="radio" name="sex" checked="checked">  女<input type="radio" name="sex"></p>

    <p>未婚<input type="radio" name="married">  已婚<input type="radio" name="married" checked> 离婚<input type="radio" name="married"></p>

<input type="checkbox"> 复选按钮

<!-- name取值相同的复选按钮视为同一组, 同样可以用checked表示是否默认选中-->
<p>

    读书<input type="checkbox" name="hobby">
    玩游戏<input type="checkbox" name="hobby">
    听音乐<input type="checkbox" name="hobby">
    敲代码<input type="checkbox" name="hobby" checked>
</p>

<input type="email"> 输入邮件地址
<input type="date" value="日期初始值"> 日期选择标签
<input type="time" value="时间初始值"> 时间选择标签

<input type="file"> 文件选择框

<input type="button" value="按钮文字"> 按钮
<input type="reset" value="重置"> 重置按钮把页面所有填写的内容重置到初始状态
<input type="submit" value="提交"> 提交按钮把表单填好的信息发送给服务器
<button type="button|reset|submit">按钮文字</button>

下拉列表标签

<select>
  <option>值1</option>
  <option>值2</option>
  ....
  <option>值n</option>
</select>

如果希望某个option默认被选中，在option上添加属性selected
写法1： selected
写法2： selected=”selected”

文本域标签适合输入多行文本内容

3.11 取值是布尔值的属性
checked 配合单选按钮、复选按钮使用
selected 配合option标签使用
readonly 表示只读，可以配合大部分表单标签使用
disabled 表示禁用，跟只读类似，不能修改，
而且在表单提交时，不会发送disabled属性的数据
加在按钮上，禁用这个按钮
required 是否必填，如果空值，不允许提交表单

# 1. css 概念 cascade style sheet 级联，层叠样式表格控制网页上标签的各种样式：颜色，字体，边框，间距… # 2. css 格式 1) 行内样式每个标签加一个样式

<标签 style="多个样式"></标签>

缺点：样式代码重复 2) 内部样式表

<html>
    <head>
        <style>样式定义</style>
    </head>
</html>

可以解决样式重复 3) 外部样式表把样式信息定义在一个单独的 *.css 的文件中

<html>
    <head>
        <link rel="stylesheet" href="css文件路径">
    </head>
</html>

# 3. 行内样式

<标签 style="多个样式"></标签>

## 3.1 颜色控制 color:颜色值颜色值可以是英文单词：red，blue，green，yellow, black, white 也可以是红绿蓝三原色： rgb(255,0,0) 还可以是16进制的值来表示： #FF0000 background-color: 背景色 ## 3.2 字体相关的样式 font-size 像素 n px; 字体本身大小 n em; font-family 字体名称：如宋体，隶书 … font-style: italic; 斜体 font-weight: bold; 粗体 ## 3.3 对齐方式 text-align: center 居中， left 左对齐， right 右对齐 ## 3.4 背景相关 background-image: url(背景图片路径) background-repeat: 控制背景图片如何重复 no-repeat(不重复) repeat-x repeat-y repeat(xy方向上都重复) background-size: 110px 缩放背景图大小 ## 3.5 div 标签容器标签，可以容纳其它标签

…

作用：1）页面布局， 2) 统一处理