HTML

最新推荐文章于 2021-12-04 15:31:20 发布

weixin_30821731

最新推荐文章于 2021-12-04 15:31:20 发布

阅读量40

点赞数

原文链接：http://www.cnblogs.com/brf-test/p/11371811.html

版权

前端的三把利器

HTML：赤裸的一个人

CSS：华丽的衣服

JS/JavaScript：赋予这个人的行为，也就是动起来

HTML（超文本标记语言）

html是什么呢，html是一种文档标记型语言，什么意思呢，就是一种浏览器可以解析、渲染的特殊标记，比如说你现在写个字那浏览器解析的时候就是这一个字，那你如果写个<h1>一个字</h1>那么这个字就会变大变粗，例如<h1>这个就是一个html的标签，浏览器遇到这样的特殊的东西就会把他渲染成其他的东西，我们现在所看到的网站都是html写的。

在很早以前的时候，有很多浏览器，这个谷歌的浏览器解析这种标签，火狐解析那种标签，ie又解析别的标签，林子大了什么鸟都有，每个厂家的浏览器只认识自己的家的标签，别人的不认识，后来W3C（万维网联盟）就出了一个规范，所有的浏览器你都遵循这个规范，后来就形成了html。

后端与前端交互方式：

1、后端通过直接返回浏览器能够识别的html代码

2、后端返回数据，前端替换html种的指定数据

html文档结构

· <!DOCTYPE html> 声明为HTML5文档。
· <html>、</html> 是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
· <head>、</head> 定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
· <title>、</title> 定义了网页标题，在浏览器标题栏显示。
· <body>、</body> 之间的文本是可见的网页主体内容。

<!DOCTYPE html>　　　　　　　　#声明HTML5文档，通过html5解析下面代码
<html lang="en">　　　　　　　 #标签对，文档开始和结束一对（一个html标签只允许出现一对）（里面包含头和身体）
<head>　　　　　　　　　　　　　　　　　　#头
    <meta charset="UTF-8">　　#指定当前字符集编码
    <title>Title</title>　　　#定义网页表题，在浏览器表题栏显示　
</head>　　　　　　　　　　　　　　　　　　#头
<body>　　　　　　　　　　　　　　#身体（body之间的文本是可见的网页主体内容）
今天网断了
<h1>今天断网了</h1>　　　　　　　　
</body>　　　　　　　　　　　　　　#身体

HTML标签格式

· html标签是由尖括号包围关键词，比如<html>

分为：

（1） 主动闭合标签：比如<p></p> 【有对象】

（2）自闭合标签：只有开头标签，没有结尾标签，比如<meta charset="UTF-8"> 【单身狗·只有开头标签，没有结尾标签】

HTML标签

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<!-- 指定编码 -->
 
<meta charset="UTF-8">
 
<!-- 每3秒中刷新一次 -->
 
<meta http-equiv="refresh" content="1">
 
<!-- 3秒后跳转页面 -->
 
<meta http-equiv="refresh" content="1;Url=http://www.imdsx.cn">
 
<!-- 关键字检索 -->
 
<meta name="keywords" content="大白">
 
<!-- 网站描述-->
 
<meta name="description" content="大白是名低调的测试工程师">
 
<!-- ie打开时以最高的兼容模式打开 -->
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
<!-- 在head中所写的所有标签全部都看不到，是内部的一些东西，除了一个标签就是title-->
 
<title>白羊座</title>
 
<!-- 前方高能预警，***重要*** -->
 
 
 
<!-- title的图标 -->
 
<link rel="shortcut icon" href="tubiao.ico">
 
<!-- 引入css -->
 
<link rel="stylesheet" href="tmp.css">
 
<!-- css样式-->
 
<style></style>
 
<!-- 引入js和编写js -->
 
<script src="tmp.js"></script>
 
</head>
 
<body>
 
</body>
 
</html>

html body

符号

<a href="http://www.imdsx.cn">大&nbsp白</a> ——&nbsp：空格

空格：&nbsp 大于号：&gt 小于号 &lt 记住常用的这三个，其他的用时百度

块级标签：H标签(加大加粗)，P标签(段落间有间距)，DIV(白板)

行内标签：SPAN标签(白板)

br-换行符

 1 <!DOCTYPE html>
 2  
 3 <html lang="en">
 4  
 5 <head>
 6  
 7 <meta charset="UTF-8">
 8  
 9 <title>Title</title>
10  
11 </head>
12  
13 <body>
14  
15 <!-- p标签称之为段落标签，占满一整行，段落之间有空行 想换行需要通过<br />标签 自闭合标签建议自己写上/作为区分-->
16  
17 <p>年轻,就是拿来折腾的。<br />让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。</p>
18  
19 <p>别在最该拼搏的年纪选择稳定，世界上最大的不变是改变，只有每天进步，才能拥抱生命的无限可能！</p>
20  
21 <p>你以为你给对方留了电话存了微信，应该彼此也能互相帮忙，却忘记了一件很重要的事情，只有关系平等，才能互相帮助。</p>
22  
23 <p>不要为了户口丢掉生活，为了稳定丢掉青春，为了平淡丢掉梦想，因为你所谓的稳定，不过实在浪费生命。</p>
24  
25 <p>真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。</p>
26  
27 <p>只有等现实的日子富足了，能力够强了，才可以去追求那些美好的生活状态，才该去追求那些伟大的梦。否则那些梦幻般的生活，都只是空中阁楼，不堪一击。</p>
28  
29 <p>生活是自己的，自己都不求进取，凭什么让别人给你美好的未来？</p>
30  
31 </body>
32  
33 </html>

form、div、span、input、label

  1 <!DOCTYPE html>
  2  
  3 <html lang="en">
  4  
  5 <head>
  6  
  7 <meta charset="UTF-8">
  8  
  9 <title>Title</title>
 10  
 11 </head>
 12  
 13 <body>
 14  
 15  
 16  
 17 <!-- 标题标签 h1最大 h6最小 只需要记住先出生最大 自带属性 -->
 18  
 19 <h1>大白</h1>
 20  
 21 <h2>大白</h2>
 22  
 23 <h3>大白</h3>
 24  
 25 <h4>大白</h4>
 26  
 27 <h5>大白</h5>
 28  
 29 <h6>大白</h6>
 30  
 31  
 32  
 33 <!-- 行内标签的代表 什么属性都不带-->
 34  
 35 <span>大白</span>
 36  
 37  
 38  
 39 <!-- 块级标签的代表 什么属性都不带，html代码中出场率最高-->
 40  
 41 <div>大白</div>
 42  
 43  
 44  
 45 <!-- 登录页面 -->
 46  
 47  
 48  
 49 <!-- 表单标签 可以理解为载体 纸 input 就是写在纸上的文字-->
 50  
 51 <form action="/login" method="post">
 52  
 53 <!-- 文本输入框 -->
 54  
 55 <input type="text" name="username"/>
 56  
 57 <!-- 密码输入框 -->
 58  
 59 <input type="password" name="passwd"/>
 60  
 61 <!-- 按钮 点击什么用也没有 需要结合js绑定事件 -->
 62  
 63 <input type="button" value="登录"/>
 64  
 65 <!-- 提交 提交表单需要用submit -->
 66  
 67 <input type="submit" value="提交"/>
 68  
 69 </form>
 70  
 71  
 72  
 73 <!-- get与post区别提交 -->
 74  
 75 <form action="/login" method="get" enctype="multipart/form-data">
 76  
 77 <!-- 文本输入框 text-->
 78  
 79 <input type="text" name="username" value="默认值"/>
 80  
 81  
 82  
 83 <!-- 密码输入框 password-->
 84  
 85 <input type="password" name="passwd"/>
 86  
 87  
 88  
 89 <!-- 按钮 点击什么用也没有 需要结合js绑定事件 -->
 90  
 91 <input type="button" value="登录"/>
 92  
 93  
 94  
 95 <!-- 多选框 checkbox {"name"：[1,2,3]} 默认值checked=checked-->
 96  
 97 <p>女朋友的选择标准</p>
 98  
 99 <input type="checkbox" name="check" value="1" checked="checked"><span>大长腿</span>
100  
101 <input type="checkbox" name="check" value="2"><span>长头发</span>
102  
103 <input type="checkbox" name="check" value="3"><span>36C</span>
104  
105  
106  
107 <!-- 单选框 radio name相同 勾选是互斥-->
108  
109 <input type="radio" name="sax" value="1" checked="checked"><span>男</span>
110  
111 <input type="radio" name="sax" value="2"><span>女</span>
112  
113  
114  
115 <!-- 文件类 file 如果上传文件一定要在form中添加特殊属性 enctype="multipart/form-data" 意思是一点一点的发给服务器-->
116  
117 <p>上传文件</p>
118  
119 <input type="file" name="file"/>
120  
121  
122  
123 <!-- 提交 提交表单需要用submit -->
124  
125 <input type="submit" value="提交"/>
126  
127  
128  
129 <!-- reset 还原表单中填写的数据到默认 -->
130  
131 <input type="reset" value="重置">
132  
133 </form>
134  
135  
136  
137 <!-- label 标题标签 与input联合运用，增加input的点击范围 可直接点击文字就输入 for：映射到input的id-->
138  
139 <label for="username">用户名</label>
140  
141 <input id="username" type="text"/>
142  
143 </body>
144  
145 </html>

转载于:https://www.cnblogs.com/brf-test/p/11371811.html

weixin_30821731

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML

前端的三把利器HTML：赤裸的一个人CSS：华丽的衣服JS/JavaScript：赋予这个人的行为，也就是动起来HTML（超文本标记语言）html是什么呢，html是一种文档标记型语言，什么意思呢，就是一种浏览器可以解析、渲染的特殊标记，比如说你现在写个字那浏览器解析的时候就是这一个字，那你如果写个<h1>一个字</h1>那么这个字就会变...
复制链接

扫一扫

HTML

“相关推荐”对你有帮助么？