HTML高级标签 

 1 <html><!--头标签-->
 2     <head>
 3         <meat charset="utf8"><!--设置字符集 utf8可以展示所有的字体-->
 4         <title>Hello life</title><!--设置标题-->
 5     </head>    
 6     <body>
 7         <!--在编辑器中不管输入多少个空格或回车键 展示在浏览器的时候都是一个空格-->
 8         <br><!--回车符 可以存在多个-->
 9         &nbsp;<!--空格 可以存在多个-->
10         &lt;<!--表示小于号 < -->
11         &gt;<!--表示大于号 > -->
12         <hr><!--水平线-->
13     </body>
14 
15 </html><!--文标签-->

 

 1 <html><!--头标签-->
 2     <head>
 3         <meat charset="utf8"><!--设置字符集 utf8可以展示所有的字体-->
 4         <title>Hello life</title><!--设置标题-->
 5     </head>    
 6     <body>
 7         <!--div中的中文如果长度超过了width的宽度会自动换行 如果写的是因为字母需要用空格隔开才会换行-->
 8     <div style="width:100px;height: 100px;background-color: red">小冯很帅小冯很帅小冯很帅小冯很帅</div>
 9     </body>
10 
11 </html><!--文标签-->

有序列表的使用方法

 1     <body>
 2         <d>你们喜欢的电影有哪些</d><!--独占一行 字体不加粗-->
 3         <!--type中只能填写1,A,a,I,i   reversde="reversder"是将序号倒序排列  start是重第几个开始排序-->
 4         <ol type="a" reversed="reversed" start="4"><!--有序列表-->
 5             <li>阿丽塔</li>
 6             <li>少年派派奇幻漂流记</li>
 7             <li>海贼王-狂热行动</li>
 8             <li>速度与激情-特备行动</li>
 9         </ol>
10     </body>

无序列表的是用法

 1 <html><!--头标签-->
 2     <head>
 3         <meat charset="utf8"><!--设置字符集 utf8可以展示所有的字体-->
 4         <title>Hello life</title><!--设置标题-->
 5         <style>
 6             *{
 7                 margin: 0;
 8                 padding: 0;
 9             }
10             ul{
11                 list-style:none;
12             }
13             li{
14             margin: 0 10px;
15             float: left;
16             color: #f40;
17             font-weight: bold;
18             font-size:14px;
19             height: 25px;
20             line-height: 25px;
21             padding: 0 5px;
22         }
23         li:hover{
24             border-radius: 15px;
25             background-color: #f40;
26             color: #fff;
27 
28         }
29         </style>
30 
31     </head>    
32     <b>这里是淘宝请选择你的操作项</b><!--独占一行字体加粗-->
33     <!-- 只有type这一个属性 默认值disc实心圆 square方块 circle是空心圆 无须列表-->
34         <ul type="square"><!--无序列表-->
35             <li>天猫</li>
36             <li>聚划算</li>
37             <li>天猫超市</li>
38         </ul>
39 
40     </body>
41 
42 </html><!--文标签-->

img标签插入图片

1     <!--alt图片占位符 title是图片提示符 -->
2         <img src="路飞.jpg" style="width:200px;" alt="这是路飞" title="路飞">
3 
4     <!--
5     1.网上url
6     2.相对路径
7     3.绝对路径
8 -->

超链接的基本使用

1     <!-- href是跳转的链接 target是跳转到另一个窗口打开链接-->
2     <a href="https://www.taobao.com" target="_blank"><li>淘宝</li></a>

form

 1     <body>
 2         <form method="get" action="">
 3             <p>
 4                 usernaem:<input type="text" name="usernaem"><!--文本框-->
 5             </p>
 6             <p>
 7                 password:<input type="password" name="password"><!--密码框-->
 8             </p>
 9             <input type="submit">
10         </form>
11     </body>

 

 

posted @ 2019-11-20 00:00  冯love  阅读(393)  评论(0)  编辑  收藏  举报