1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <!-- html基本标签 --> 9 <h1>标题只能1-6</h1> 10 <h2>独成一段，更改字体，加粗</h2>对比一下 11 <strong>加粗，不独成一段</strong>加粗 12 <em>斜体，不独成一段</em>斜体 13 <strong><em>效果加粗＋斜体</em></strong><!-- 大多标签可嵌套是效果叠加 --> 14 <del>$50,相当于中划线</del> 15 <!-- 以上标签除了标题标签以外其余均不独立成段 --> 16 <address>地址，独占一行，斜体，但是基本不用</address> 17 <div>独占一行</div> 18 <span>连在一起</span><span>连在一起</span><span>连在一起</span> 19 <!-- 因为div和span标签特性，所以它们可以充当容器，结构化，分块，绑定化操作，好维护 --> 20 <hr /> 21 22 23 <div style = "width:100px;height:100px;background-color:blue">hdfidurriuhgeiurhvbsfdlhglruihglrehgjfdbgskuygtsrh</div> 24 <div style = "width:100px;height:100px;background-color:red">hshs duf ufuer jfur uir hg ihfg fgu r b rg</div> 25 <div style = "width:100px;height:100px;background-color:green">哈哈哈哈哈哈哈哈快乐小呆瓜</div> 26 <!-- blue里溢出是因为把那一串当成一个字符了，中文和带空格不溢出，是因为空格或者回车在这里表示的是文字分隔符 --> 27 <!-- 在html中 相当于空格，小于号<:<, 大于号>:> --> 28 <尖括号内 文字><br> 29 尖括号内文字 30 <!-- <br>相当于换行，回车的作用 --> 31 html标签基本都有头标签和尾标签，但是也有单标签例如meta，br，hr 32 <!-- 1:<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 33 <meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。 34 比如说SEO技术（搜索引擎技术，告诉搜索引擎爬虫，该网站是关于什么的） 35 <meta content = "描述" name = "说明"> 36 还有一个属性charset（编码字符集），属性值有：gb2312国家标准2312条；gbk国家标准扩展版本（包含了亚裔字符集+繁体）；unicode万国码；utf-8万国码升级版 37 2:<br>换行符 38 3:<hr>水平线，很少使用 --> 39 <br><hr /> 40 41 42 43 44 有序列表<br> 45 <ol> 46 <!-- <ol type = 五种> --> 47 <!-- <ol type = "1"><!-- 该方式即为默认排序方式 1.2.3.--> 48 <!-- <ol type = "a"><!-- 用字母表示的a.b.c. --> 49 <!-- <ol type = "A"><!-- 27就表示为AA,实质就相当于27进制 --> 50 <!-- <ol type = "i"><!-- 罗马数字 --> 51 <!-- <ol type = "I"><!-- 罗马数字 --> 52 <!-- 如果想倒着排<ol type = "1" reversed = "reversed"> --> 53 <!-- 如果想从2开始排<ol type = "1" start = "2"> --> 54 <li>小猪</li> 55 <li>小狗</li> 56 <li>小星星</li> 57 </ol><hr /> 58 无序列表，基本都是无序列表<!-- <ul><li></li></ul> --> 59 <ul> 60 <!-- 在ul有一个type属性，控制li里内容前边的小图标 --> 61 <!-- <ul type = "disc">实心圆点 --> 62 <!-- <ul type = "square">实心方块，默认 --> 63 <!-- <ul type = "circle">空心圈 --> 64 <!-- <ul type = none> 就是不要前边的小图标--> 65 <li>太阳</li> 66 <li>地球</li> 67 <li>月亮</li> 68 </ul> 69 关于img标签 70 <img src="img/hebe.PNG" alt ="这是hebe" title="这是hebe" ><!--此处应有hebe图片，哈哈哈哈--> 71 <!--src是资源缩写，alt是图片占位符，当图片加载不出来时显示占位符中的提示，title图片提示符，鼠标放上去之后告诉这是啥 --> 72 <!-- 关于src --> 73 <!-- 1.网上的url（重新开一个标签页所打开的那个地址） --> 74 <!-- 2.本地的绝对路径（不在同一个目录下） --> 75 <!-- 3.本地的相对路径（在同一个目录下） --> 76 <br><hr /> 77 78 79 80 <!-- <a>标签4大作用 --> 81 <!-- 1.超链接--> 82 <!-- 2.锚点 --> 83 <!-- 3.打电话发邮件 --> 84 <!-- 4.协议限定符（书签，黑客） --> 85 a标签作用1.超链接 86 <a href = http://www.baidu.com> www.baidu.com </a> 87 a属性：target"_blank",新的一页打开 88 <a href = http://www.taobao.com target="_blank" >www.taobao.com</a> 89 作用2.锚点作用 90 <a href = "#demo1"></a><!-- 直接跳转到那个位置，以后再说 --> 91 <div id = "demo1"></div> 92 <div id = "demo2"></div> 93 作用3.打电话，发邮件 94 <a href = "tel:18282828282"></a> 95 <a href = "mailto:邮件地址"></a> 96 作用4.协议限定符 97 <a href = "javascript:(js文件)">强制执行（运行）javascript文件 98 <br><hr> 99 <!-- form表单：发送数据，前端发给后端工程师 --> 100 <!-- method发送数据方式：get和post两种发送方式--> 101 <!-- <form method = "get/post" action = "发给谁"></form> --> 102 <form method = "get"> 103 username: <input type "text" name = "用户名"> 104 password: <input type "password" name = "密码"> 105 <input type = "submit" value = "提交"> 106 <!-- 在地址栏内？后有用户名=。。。。。&密码=。。。。。才算提交成功 --> 107 <!-- md5加密 不可逆--> 108 单选框 109 name为了统一在同一选择题下，value为了传数据，checked ="checked"谁加上谁就是默然选项 110 <p>你最喜欢的小动物</p> 111 小狗<input type = "radio" name = "animal" value = "小狗" checked="checked"> 112 小熊猫<input type = "radio" name = "animal" value = "小熊猫" > 113 熊猫<input type = "radio" name = "animal" value = "熊猫"> 114 <input type = "submit" value = "提交"> 115 116 复选框 117 <p>你最喜欢的小动物</p> 118 小狗<input type = "checkbox" name = "animal" value = "小狗" checked="checked"> 119 小熊猫<input type = "checkbox" name = "animal" value = "小熊猫" checked="checked" > 120 熊猫<input type = "checkbox" name = "animal" value = "熊猫"> 121 <input type = "submit" value = "提交"> 122 <!-- 单选框和复选框区别type值一个是radio,一个是checkbox --> 123 <br> 124 下拉菜单 125 <div> 126 <select name = "笑"> 127 <option value="">haha</option> 128 <option value="">houhou</option> 129 <option value="">heihei</option> 130 </select> 131 </div> 132 </body> 133 </html>
原文：https://www.cnblogs.com/foximengxin/p/12404019.html