程序员书籍笔记 程序员书籍笔记
  • HTML
  • CSS
  • JavaScript
  • 前端知识
  • Vue
  • MarkDown
  • git
  • Node.js
  • Linux
  • 51单片机
  • 四级
  • 第一学期课程
  • 操作系统
  • 计算机网络
  • 数据结构
  • 计算机组成原理
  • HTML5
  • Electron
  • 日记便签
  • 前端导航
GitHub (opens new window)
  • HTML
  • CSS
  • JavaScript
  • 前端知识
  • Vue
  • MarkDown
  • git
  • Node.js
  • Linux
  • 51单片机
  • 四级
  • 第一学期课程
  • 操作系统
  • 计算机网络
  • 数据结构
  • 计算机组成原理
  • HTML5
  • Electron
  • 日记便签
  • 前端导航
GitHub (opens new window)
  • HTML

    • 标签
      • HTML标签
      • 骨架
      • 标题标签
      • 段落标签
      • 水平线标签?
      • 换行标签
      • 文本格式化标签?
        • 加粗
        • 下划标签?
        • 倾斜
        • 删除标签?
      • 标签的属性?
      • 图片标签
      • 超链接标签?
        • 链接标签属性?
        • base标签
        • 锚点链接
      • 列表标签
        • 无序列表
        • 有序列表
        • 自定义列表?
      • HTML转义字符
      • 表格标签
        • 表格格式
        • 表格属性?
        • 表格合并
    • 表单标签
    • div标签
    • iframe标签
    • HTML5基础
    • HTML总结
  • CSS

  • JavaScript

  • GO

  • 正则表达式

  • java

  • TypeScript

  • react

  • 前端知识

  • jQuery

  • Python

  • C和C++

  • 前端和后端
  • HTML
yuadh
2021-08-13
目录

标签

# HTML标签

<!DOCTYPE HTML>
HTML5规范 告知浏览器使用这种规范去解析页面
<html lang="zh">
告知浏览器页面是以中文为主的网站
<meta charset="UTF-8">
meta标签设置网站的元信息
<title>网站标题</title>
1
2
3
4
5
6
7

# 骨架

<html>
	<head>
		<title></title>
	</head>
	<body>
	</body>
</html>
1
2
3
4
5
6
7

# 标题标签

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
1
2
3
4
5
6

# 段落标签

<p>一个段落?</p>
1

# 水平线标签?

<hr/>
1

# 换行标签

<br/>
1

# 文本格式化标签?

# 加粗

  <b>文本</b>
  or
  <strong>文本</strong>
1
2
3

# 下划标签?

  <u>文本</u>
  or
  <ins>文本</ins>
1
2
3

# 倾斜

  <i>文本</i>
  or
  <em>文本</em>
1
2
3

# 删除标签?

  <s>文本</s>
  or
  <del>文本</del>
1
2
3

# 标签的属性?

属性为HTML标签提供附加信息

# 图片标签

<img src="URL">
1

属性:

  • src:图片的路径
  • alt:图片加载不出来,显示的文字
  • title:鼠标悬浮图片显示的文字
  • width:宽
  • height:高

# 超链接标签?

  <a href="URL" target="跳转方式">文本或图片?</a>
1

# 链接标签属性?

  • href
    外部链接:网址
    内部链接:路径?
  • target
    _self:在当前页面打开
    _blank:保留原始界面,新界面打开

# base标签

统一页面的跳转方向?

  <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <base target="_blank">
  </head>
1
2
3
4
5

# 锚点链接

标签的ID属性?

使用
<h1 id="y"><h1>
<a href="#y">文件内定?</a>
or
<a href="URL#y"> 跨文件定?</a>
1
2
3
4
5

# 列表标签

# 无序列表

  <ul>
    <li></li>
    <li></li>
  </ul>
  un list
1
2
3
4
5

# 有序列表

  <ol>
    <li></li>
    <li></li>
  </ol>
  order list
1
2
3
4
5

# 自定义列表?

一般用于网站下方信息显示?

  <dl>
    <dt>标题</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
  </dl>
  define list
  data table 
1
2
3
4
5
6
7

# HTML转义字符

字符 描述 字符的代码
空格 &nbsp
< 小于号 &lt
> 大于号 &gy
& 和号 &amp

# 表格标签

# 表格格式

  <table>
    <caption>表格演示</caption>
    <thead>
      <tr>
          <th>标题1</th>
          <th>标题2</th>
          <th>标题3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1-1</td>
        <td>内容1-2</td>
        <td>内容1-1</td>
      </tr>
      <tr>
        <td>内容2-1</td>
        <td>内容2-2</td>
        <td>内容2-3</td>
      </tr>
    </tbody>
  <table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 表格属性?

属性? 作用
border 边框
width 给表格设置宽
height 给表格设置高
cellspacing 规定单元格与单元格之间的空白
cellpadding 单元格内部边框与内容的空白?
align 对齐方式(table、tr、td分别设置有不同效果)
caption 表格标题属性?
th 表头属属性?
tbody 表格结构标签
tfoot 表格结构标签
  1. 给table标签设置:会让表格的整体在浏览器中水平居中?
  2. 给tr标签设置:会该tr中单元格的内容水平居中!!!
  3. 给td标签设置:会该单元格中的内容水平居中

See the Pen by yuandehua (@yuandehua) on CodePen.

# 表格合并

rowspan : 跨行合并
colspan :跨列合并?
原则左上 ,对坐上列表进行保留 删除需要合并的单元格?

编辑 (opens new window)
上次更新: 2023/02/07, 14:51:48
表单标签

表单标签→

Theme by Vdoing | Copyright © 2021-2023 yuadh
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×