文章

html

发表于 更新于
作者
5 分钟阅读
html

初始化快捷键，注释

1
2
3

! #回车补全
shift alt f #代码格式化
 <!--这是一个注释 -->

基础框架介绍

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>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>
  
</body>
</html>

width=device-width 表示页面的宽度将根据设备的屏幕宽度进行缩放，以适应不同尺寸的设备（如手机、平板、电脑等）。 initial-scale=1.0 表示页面初始的缩放比例为 1.0，即页面加载时不进行缩放，以原始大小显示。这个设置对于响应式设计非常重要，确保页面在各种设备上都能正确显示布局。 meta标签描述html文档属性

元素

段落标签

1

  <p>我是一个段落</p>
标签描述
<em>着重文字
<b>粗体文本
<i>斜体字
<strong>加重语气
<del>删除字
<span>元素没有特定的含义

标题,换行

1
2
3
4

<h1> </h1> 
#标签项
<h1 align="left|center|right"> </h1> <!-- 标签项位置-->
<br> <!--换行 -->

水平线

1
2
3

<hr></hr>
<hr color="" width="" size="" align=""></hr>
 <!--颜色、长度、高度、对齐方式 -->

图片

1
2
3
4

<img src ="" alt = "" title ="" width="" height= ""></img>
<!-- src 图片路径-->
<!-- alt 图像文本替换，在图片无法出现时-->
<!-- title 鼠标悬停提示-->

相对路径

1
2
3

/ 子集关系
../ 父级关系
./ 同级关系

超文本

1
2

<a href=""> </a>
 <!--超链接 href中填写url-->

target：定义链接的打开方式。

1
2
3
4

_blank: 在新窗口或新标签页中打开链接。
_self: 在当前窗口或标签页中打开链接（默认）。
_parent: 在父框架中打开链接。
_top: 在整个窗口中打开链接，取消任何框架。

有序列表

1
2
3
4
5
6
7
8
9
10

<ol type = "">
  <li>Coffee</li>
  <li>Milk</li>
</ol>
 <!-- type 默认是1 
  a 表示列表项目用小写字母标号（a,b,c.…)
  A表示列表项目用大写字母标号(A,B,C…)
  i 表示列表项目用小写罗马数字标号
  | 表示列表项目用大写罗马数字标号
  -->

无序列表

1
2
3
4
5
6
7
8
9
10
11
12

<ul>
  <li>Coffee</li>
  <li>Milk</li>
</ul>
<!-- type 
 默认none
  disc默认实心圆
  circle空心圆
  square小方块
  none不显示

  -->

快捷键

ul>li*3 数量

表格

1
2
3
4
5
6
7

<table broder="" width = "" height="">
  <tr>
    <td></td>
  </tr>
</table>
<!-- table 声明表格 tr 行 td列-->
<!-- 有无边框 宽度 高度-->

快捷键

table>tr2>td2 数量

合并单元格

colspan 水平合并 从左往右
1
2
3
4
5
6
7
8

<!-- colspan 水平合并-->
<table broder="" width = "" height="">
  <tr>
    <td colspan= "2"></td>
    <td></td>
    <td></td>
  </tr>
</table>
rowspan 上下合并 从上往下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

rowspan 上下合并 从上往下
<!-- colspan 水平合并-->
<table broder="" width = "" height="">
  <tr>
    <td rowspan= "2"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

表单

1
2
3
4
5
6
7
8
9
10
11

<!-- action 服务器地址 name表单名称 method 提交方式-->
<form action ="" method ="" name = "">
  <input type=""> 
  <!--输入框 
    password 为密码
    submit 为按钮 可用value定义框内文本
  -->
  <!--按钮 -->
  <input type = "submit">
  <button>
</form>

容器

div 容器元素

1
2
3

<!-- id属性-->
<div id="">
</div>

html5新增

1
2
3
4
5
6
7
8

<header></header>头部
<nav></nav>导航
<section></section>定义文档中的节，比如章节、页眉、页脚
<aside></aside>侧边栏
<footer></footer>脚部
<article></article>
代表一个独立的、完整的相关内容块，例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等
前端
前端 html
本文由作者按照 CC BY 4.0 进行授权