html基础中的基础_html基础li-CSDN博客

本文链接：https://blog.csdn.net/lijiuchangxin/article/details/80658125

一：HTML5简介与结构 ·

HTML：超文本标记语言，是用来编写网页的标记语言。

HTML5的基本结构：

            
    <!DOCTYPE html>
 
                      <html> 
        
                             <head> 
        
                                     <title>网页标题</tltle> 
        
                                     <meta charset="utf-8"/> 
        
                             </head> 
        
                             <body> 
        
                                 网页主体 
        
                             </body>    
        
                      </html>

一个简单的代码:

            
<!DOCTYPE>
 
         <html> 
        
             <head> 
        
                 <title>我的第一个网页</title> 
        
                 <meta charset="gbk"/> 
        
         ​ 
        
             </head> 
        
             <body> 
        
                 <h1>中央新闻</h1> 
        
                 锄禾 
        
                 <hr/> 
        
                 锄禾日当午，<br/>汗滴禾下土，<br/>谁知盘中餐，<br/>粒粒皆辛苦 
        
                 <p> 
        
                     这是唐代的一首古诗，表达了。。。 
        
                 </p> 
        
                 <a href="http://www.baidu.com" target="_blank">点击跳转</a> 
        
                 <br/> 
        
                 <img src="....图片地址" width="100" height="50"/> 
        
             </body> 
        
         </html>

二：html5非表单标签

1.<h1></h1> <h2></h2>.....<h6></h6> 标题标签

2.<hr/> 横线标签

3.<br> 换行标签

4.<p></p> 段落标签

5.<a href="链接地址">链接的内容</a> 超链接标签注意：还有一个target选项，target=_blank 是跳转到其他网页

6.<img src="图片地址"/ width="图片宽度" height="图片高度"/> 图片标签

7.列表标签

有序列表无序标签

..... ..........

</ol> <ul>

8.表格标签 <table border="边框">

<tr>

<td>单元格内容</td>

.....

<td>单元格内容</td>

<tr>

9.分区标签 <div>内容</div> 注意：每对div分区标签独占一块区域，其他内容只能显示在它的下一行。

三、html表单标签

1. form标签

            
<form action="提交服务器地址" method="post|get">
 
         </form> 
        
         ​ 
        
         #注意：post提交与get提交的区别： 
        
                post用来提交数据，提交的数据时封装到消息体重的； 
        
                get虽然也能用来提交数据，但是提交的数据会显示在地址栏上，所以get方式提交数据不安全；get经常用来作为获取数据的方式 
        
                post提交的数据没有大小限制；get提交的数据大小有限制。

2. 文本标签

            
<input type="text" name="文本标签名,在后台以参数名存在" value="提交的值"/>
 
         ​

3.密码框标签

            
        
<input type="password" name="密码标签名,在后台以参数名存在" value="提交的值"/>

4.提交标签

            
        
<input type="submit" value="点击提交"/>

5.重置标签

            
        
<input type="reset" value="点击重置"/>

6.普通按钮

            
        
<input type="button" value="这就是一个按钮"/>

7.单选框

            
<input type="radio" name="单选框的名称" value="提交给服务器的值"/>
 
         注意：同一组单选框按钮的name值必须一致，为了保证选择的排他性

8.复选框

            
<input type="checkbox" name="复选框名称" value="提交给服务器的值"/>
 
         注意：同一组复选框的name值最好一致，目的是为了在程序获取同组复选框方便。

9.下拉列表框

            
<select name="" value="提交给服务器的值">
 
             <optgroup label="组名">   #分组 
        
                 <option value="选项对应的的值">选项显示文本</option> 
        
                 <option value="选项对应的的值">选项显示文本</option> 
        
             </optgroup> 
        
             。。。 
        
             <option value="选项对应的的值">选项显示文本</option> 
        
         ​ 
        
         </select>

10.文件标签

            
<input type="file" name="参数名">
 
         注意：如果要上传文件，则form表单必须添加一个enctype="multipart/form-data"的属性

11.日期标签

            
        
<input type="date" name="参数名"/>

12.文本域

            
<textarea name="introduce" rows="3" cols="5">
 
         </textarea>

11.视频标签

            
        
<video src="视频地址" controls="controls"