html常用标签 

  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中&nbsp;相当于空格，小于号<:&lt;, 大于号>:&gt; -->
 28         &lt;尖括号内&nbsp;&nbsp;&nbsp;&nbsp;文字&gt;<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>

 

posted @ 2020-03-03 19:03  佛系小萌新  阅读(177)  评论(0)    收藏  举报