1.Doctype
<!DOCTYPE html>
支持标准w3c格式
2.Meta
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
<meta charset="utf-8"> #页面编码
<meta name="viewport" content="width=device-width, initial-scale=1.0"> #关键词
3.Title
网页头部信息
<title>Jumpserver | 开源跳板机系统</title>
4.Link
①css
< link rel="stylesheet" type="text/css" href="css/common.css" >
②icon
< link rel="shortcut icon" href="image/favicon.ico">
5.Style
在页面中写样式
例如：
< style type="text/css" >
.bb{
}
< /style>
6.Script
①引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
②写js代码
< script type="text/javascript" > ... </script >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> #页面编码
<meta name="viewport" content="width=device-width, initial-scale=1.0"> #关键词
<title>Jumpserver | 开源跳板机系统</title>
<link rel="shortcut icon" href="/static/img/facio.ico" type="image/x-icon">
{% include 'link_css.html' %}
{% include 'head_script.html' %}
</head>
常用标签
标签一般分为两种：块级标签 和 行内标签
- a、span、select 等
- div、h1、p 等
1.各种符号
2.p 和 br
p表示段落，默认段落之间是有间隔的！
br 是换行
<p>This is some text in a very short paragraph</p>
<html>
<body>
<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>
</body>
</html>
3.a 标签
< a href="http://www.autohome.com.cn"> </a>
1、target属性，_black表示在新的页面打开
2、锚
指向 w3school 的超链接：
<a href="http://www.w3school.com.cn">W3School</a>
4.H 标签
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
5.select
创建带有 4 个选项的选择列表：
<select>
</select>
<div id='t35'>
<h2>select 标签</h2>
<select>
<option value='1'>上海</option>
<option value='2'>北京</option>
<option value='3' selected='selected'>广州</option>
</select>
<select size='3'>
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>广州</option>
</select>
<select multiple="multiple" size='3'>
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>广州</option>
</select>
<select>
<optgroup label='河北省'>
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
<optgroup label='山西省'>
<option>太原</option>
<option>平遥</option>
</optgroup>
</select>
</div>
6.checkbox
<html>
<body>
<form action="/example/html/form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>
</body>
</html>
input的checkbox对象
Checkbox 对象代表一个 HTML 表单中的 一个选择框。
在 HTML 文档中 <input type="checkbox"> 每出现一次，Checkbox 对象就会被创建。
<div id='t36'>
<h2>Checkbox</h2>
<input type='checkbox'/>
<input type='checkbox' checked/>
<input type='checkbox' checked='checked'/>
</div>
7.redio
<div id='t37'>
<h2>redio</h2>
男<input type="radio" value="man">
女<input type="radio" value="male">
保密<input type="radio" value="no">
<br/><br/>
男<input type="radio" name="gender" value="man">
女<input type="radio" name="gender" value="male">
保密<input type="radio" checked="checked" name="gender" value="no">
</div>
8.password
<div id='t38'>
<h2>password</h2>
<input type='text'/>
<input type='password'/>
</div>
9.button
<div id='t39'>
<h2>button</h2>
<input type='button' value='button' />
<input type='submit' value='submit'/>
</div>
10.file
<div id='t310'>
<h2>file</h2>
<input type='file' value='file' />
<p>提交文件时： enctype='multipart/form-data' method='POST'</p>
</div>
11.textarea
<textarea rows="3" cols="20">
在w3school，你可以找到你所需要的所有的网站建设教程。
</textarea>
<div id='t311'>
<h2>textarea</h2>
<textarea></textarea>
<textarea style='width:500px;height: 200px;'></textarea>
</div>
12.label
<div id='t312'>
<h2>label</h2>
姓名：<input id='name1' type='text' />
婚否：<input id='marriy1' type='checkbox' />
<br/>
<label for='name2'>姓名：<input id='name2' type='text' /></label>
<label for='marriy2'>婚否：<input id='marriy2' type='checkbox' /></label>
</div>
13.ul ol dl
ul: unordered lists
ol: ordered lists
li: Lists
ol 有序列表。
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
表现为：
1……
2……
3……
ul 无序列表，表现为li前面是大圆点而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>
很多人容易忽略 dl dt dd的用法
dl 内容块
dt 内容块的标题
dd 内容
可以这么写：
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
14.table
<html>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>
15.fieldset
16.form
<html>
<body>
<form action="/example/html/form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>
</body>
</html>
17.div
文档中的一个部分会显示为绿色：
<div style="color:#00FF00">
</div>
![]()
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）