一、<head>部分
<!-- 声明该文档是html5的文档 -->
<!DOCTYPE html>
<!-- lang="en"是说明该网页主要的语言是英文 -->
<!-- <html lang="zh-CN"> -->
<html lang="en">
<head>
<!-- 不写这个如果有中文可能会乱码 -->
<meta charset="utf-8">
<title>html</title>
<!-- 定义css样式 -->
<style type="text/css"></style>
<!-- 定义js代码或引入外部js文件 -->
<script type="text/javascript"></script>
<!-- 引入外部样式表文件 -->
<link rel="stylesheet" type="text/css" href="">
<!-- 定义页面原信息 -->
<meta/>
<meta name="keywords" content="关键字,meta,keywords,搜索">
<meta name="description" content="简单介绍html的元素">
</head>
<body>
</body>
</html>
1.几个常用标签：|
标签
|
意义
|
|
<title></title>
|
定义网页标题
|
|
<style></style>
|
定义内部样式表
|
|
<script></script>
|
定义JS代码或引入外部JS文件
|
|
<link/>
|
引入外部样式表文件
|
|
<meta/>
|
定义网页原信息
|
2.Meta标签介绍：<meta>元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的。
meta标签的组成：
meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
a. http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型--><meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档--><meta http-equiv="x-ua-compatible" content="IE=edge">
b. name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">
二、<body>部分
表单属性：
|
属性
|
描述
|
|
accept-charset
|
规定在被提交表单中使用的字符集（默认：页面字符集）。
|
|
action
|
规定向何处提交表单的地址（URL）（提交页面）。
|
|
autocomplete
|
规定浏览器应该自动完成表单（默认：开启）。
|
|
enctype
|
规定被提交数据的编码（默认：url-encoded）。
|
|
method
|
规定在提交表单时所用的 HTTP 方法（默认：GET）。
|
|
name
|
规定识别表单的名称（对于 DOM 使用：document.forms.name）。
|
|
novalidate
|
规定浏览器不验证表单。
|
|
target
|
规定 action 属性中地址的目标（默认：_self）。
|
input
|
type属性值
|
表现形式
|
对应代码
|
|
text
|
单行输入文本
|
<input type=text" />
|
|
password
|
密码输入框
|
<input type="password" />
|
|
date
|
日期输入框
|
<input type="date" />
|
|
checkbox
|
复选框
|
<input type="checkbox" checked="checked" />
|
|
radio
|
单选框
|
<input type="radio" />
|
|
submit
|
提交按钮
|
<input type="submit" value="提交" />
|
|
reset
|
重置按钮
|
<input type="reset" value="重置" />
|
|
button
|
普通按钮
|
<input type="button" value="普通按钮" />
|
|
hidden
|
隐藏输入框
|
<input type="hidden" />
|
|
file
|
文本选择框
|
<input type="file" />
|
<!-- 声明该文档是html5的文档 -->
<!DOCTYPE html>
<!-- lang="en"是说明该网页主要的语言是英文 -->
<!-- <html lang="zh-CN"> -->
<html lang="en">
<head>
<!-- 不写这个如果有中文可能会乱码 -->
<meta charset="utf-8">
<title>html</title>
<!-- 定义css样式 -->
<style type="text/css"></style>
<!-- 定义js代码或引入外部js文件 -->
<script type="text/javascript"></script>
<!-- 引入外部样式表文件 -->
<link rel="stylesheet" type="text/css" href="">
<!-- 定义页面原信息 -->
<meta/>
<meta name="keywords" content="关键字,meta,keywords,搜索">
<meta name="description" content="简单介绍html的元素">
</head>
<body>
<div>
<!--
html标签的几个分类：
1. 单标签和双标签
2. 内联标签和块儿级标签(是否独占一行)
内联: span img a b i
块儿级:div h1~h6 p hr ul li ol
嵌套的规则:
1. 内联的不能套块儿级
2. p不能套块儿级标签
3. 展示用的和交互用的
4. table标签
5. 列表
1. ul
2. ol
3. dl
6. 特殊符号
1.
2. ©
3. ®
4. <
5. >
-->
<p id="图片相关的设置">
<img src="" alt="当图片显示不出来会打印这句话" title="鼠标移到图片上会打印这句话">
</p>
<p id="页面内的跳转">
<a href="#test">跳到最后</a>
<a href="" id="test"></a>
</p>
<!--
总结input属性：
text
textarea 大段文本
password
radio 单选框
checkbox 多选框
select 下拉菜单
option 具体的下拉选项
optgroup 分组的下拉框（label="上海"）
date 日期
datetime 时间
file 文件
button 普通按钮，多用js给它绑定事件
reset 重置
submit 提交
-->
<p id="emmet插件的使用">
<!-- 在pycharm中按tab键会进行快捷操作,其它编辑器中要安装emmet插件 -->
h1*4>a.c$#id${content$}
</p>
<p>
<label for="username">username：</label>
<input type="text" name="" id="username">
<input type="password" name="密文输入">
<input type="hidden" name="隐藏">
<input type="text" value="默认可以修改">
<input type="text" name="" placeholder="占位符">
<input type="" readonly value="默认不能修改">
<input type="text" value="不能被选中" disabled>
</p>
<p id="单选框">
性别:
<!-- label的第一个用法 -->
<input type="radio" checked name="gender" id="man">
<label for="man">男</label>
<input type="radio" name="gender" id="woman">
<label for="woman">女</label>
</p>
<p id="复选框">
爱好：
<!-- label的第二个用法 -->
<label><input type="checkbox" name="">篮球</label>
<label><input type="checkbox" name="">足球</label>
<label><input type="checkbox" name="">皮球</label>
</p>
<p id="下拉分级">
<!-- 加入multiple就变成了多选的下拉框 -->
<select multiple>
<optgroup label="河南">
<option>许昌</option>
<option>洛阳</option>
<option selected>郑州</option>
<option>商丘</option>
</optgroup>
<optgroup label="广东">
<option>广州</option>
<option>惠州</option>
</optgroup>
</select>
</p>
<p id="文本框输入">
<textarea cols="30" rows="10"></textarea>
</p>
<p id="上传文件">
头像:
<input type="file" name="">
<!--
method="post" enctype="multipart/form-data" autocomplete="off" 关闭自动补全 novalidate
-->
</p>
<P id="input按钮">
<input type="submit" value="提交">
<input type="button" value="按钮">
<input type="reset" value="全部重置">
</P>
<p id="选择时间">
生日:
<input type="date" name="">
</p>
</div>
<div>
</div>
</body>
</html>