HTML5

最新推荐文章于 2023-03-16 17:01:16 发布

YD_1989

最新推荐文章于 2023-03-16 17:01:16 发布

阅读量99

点赞数

分类专栏：前端基础文章标签： html

本文链接：https://blog.csdn.net/m0_58680865/article/details/119815698

版权

前端基础专栏收录该内容

23 篇文章 1 订阅

订阅专栏

HTML5

(一)前台核心语言
(1)HTML5：超文本标记语言。定位：内容。

(2)CSS3：层叠样式表语言。定位：样式。

(3)JavaScript(ES6)：JS语言。定位：功能。

HTML5定义：超文本标记语言。定位：内容

Brackets生成HTML模板快捷键：！+ Tab

http：超文本传输协议

（一）HTML5模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道</title>//<title>网页标题标签</title>中间代表网页名字
</head>
<body>
//代码写在body里面，h标签是标题的标签，h1~h6分别是1到6级标题   
   <h1>(1)HTML5模板</h1>
   <h2>标题2</h2>
   <h3>标题3</h3>
   <h4>标题4</h4>
   <h5>标题5</h5>
   <h6>标题6</h6>  
</body>
</html>

（二）HTML的表单标签-form及表单项（14个）

<body>
   
<h1>(2)HTML5的表单一</h1>
<h2>注意：表单项必须放在表单中。</h2>
<h2>作用：录入信息。</h2>
    表单标签：<form></form>
<form>
   		    文本框<input type="text"><br>
            密码框<input type="password"><br>
            单选框<input type="radio"><br>
            复选框<input type="checkbox"><br>
            邮箱框<input type="email"><br>
            网址框<input type="url"><br>
            数字框<input type="number"><br>
            日期框<input type="date"><br>
            颜色框<input type="color"><br>
            搜索框<input type="search"><br>
            文件框<input type="file"><br>
            下拉框<select>
                    <option>北京</option>
                    <option>上海</option>
                    <option>重庆</option>
                 </select><br>
            提交按钮<input type="submit" value="提交按钮">
            重置按钮<input type="reset" value="重置按钮">
</form>  
</body>
</html>

（三）form的标签属性

<body>
   
   <h1>HTML5中的表单二</h1>
   
   <form id="form01" //唯一标识，名字随便起，但是要求唯一
         name="form01" //名字属性，随便起，可以重复
         action="1.html" //跳转路径，后端的Requestmapping路径就写在这里（提交路径、发送路径）
         autocomplete="off">//自动补全(清空)的属性(on/off)。比如在百度查询时，查询“刘亦菲”然后跳转页面，当我们退回原来的查询页面时，刘亦菲三个字依旧在搜索框中；用off则自动清除
       
       <input id="a" //id和name是每个标签都会有的，通常前端开发中，id和name取名一样
              name="a" 
              type="text" 
              placeholder="请输入名字" //框里的提示信息
              required//必填项，表示框里不能为空
              autofocus//焦点，光标在框里一直闪
              value="内容的值"><br>//value是内容属性，即内容的值，但是文本框中不常用，用法例如：
      	单选框<input type="radio" value="1">男<br>//用户看到的是男，但是往后台传送的是1
   		多选框<input type="checkbox" value="2">游泳<br>//用户看到的是游泳，但是往后台传送的是2
       注意：以上所有的标签属性功能都是在一个框里显示
       
       <input id="b" 
              name="b" 
              type="number"
              placeholder="请输入年龄"//框里的提示信息
              required><br>
        
       //<textarea>文本域表单项，常用属性rows(行)和cols(列)</textarea>
       
       <textarea rows="3" cols="9">文本域</textarea><br>
       
       //<selct>下拉框表单项</selct>
      
       <select>
           <option value="北京">北京</option>
           <option value="shanghai">上海</option>
       </select><br>
       
       <input type="submit" value="提交按钮1" formaction="1.html">//覆盖按钮，用于一个页面有两个以上的按钮，比如邮箱上面的一堆按钮
       <input type="submit" value="提交按钮2" formaction="2.html">
       <input type="reset">
   </form>
   
    //表单外部的数据如果想和表单关联
   <input type="text" form="form01">
    
</body>
</html>

（四）HTML中的表格-table

<body>
   
   <h1>(4)HTML5中的表格</h1>
   <h2>作用：表格用来显示信息。</h2>
   
<table border="1">//border是加外框线
//thead和tbody里面是行标签，thead里面放的是标题（相当于数据库表格中的字段）；tbody里面放的是具体数据
//thead和tbody里面放的都是行标签<tr></tr>,一个<tr></tr>代表一行
//标题行里面用列（格）标签<th></th>,一个<th></th>代表一列
   <thead>
       <tr><th>姓名</th><th>年龄</th></tr>//表示：有一行标题，标题里面有姓名，有年龄共两列
   </thead>

    //<td></td>数据单元格标签，里面是具体数据，一个<td></td>就表示一个具体数据
   <tbody>
       <tr><td>张三</td><td>30</td></tr>
       <tr><td>李四</td><td>40</td></tr>
   </tbody>
</table>    
</body>
</html>

（五）HTML5中的列表、超链接、图片

<body>
   
<h1>(5)HTML5中的列表、超链接、图片</h1>

无序列表:标签是<ul></ul>,子标签是<li></li>
<ul>
    //列表通常不是单独使用，而是加上超链接，超链接的标签<a></a>,地址属性是 href
   <li><a href="1.html">公司介绍</a></li>
   <li><a href="2.html">产品展示</a></li>
</ul>

有序列表:标签是<ol></ol>,子标签是<li></li>
<ol>
   <li>
       <a href="1.html">
           <img src="1.png" width="200px" height="100px">
       </a>
   </li>
   
   <li><a href="2.html"><img src="2.png" width="200px" height="100px"></a></li>
   
</ol>
  
</body>
</html>

（六）HTML5的多媒体音频视频

<body>
   
<h1>(6)HTML5的多媒体音频视频</h1>
//音频标签<audio></audio>
<audio src="bg.mp3" controls></audio>//src代表音频地址，controls是控制器组件，必加的
//视频标签<video></video>  
<video src="birds.mp4" controls poster="1.png" loop></video>//poster是视频封面图片路径，loop是循环播放
    
</body>
</html>

（七）HTML5新增功能

<body>
   
   <h1>(7)HTML5新增功能</h1>
   <h2>说明：大部分标记都是HTML4的标记。</h2>
   <h2>说明：h5只有新增标签和新增的属性。</h2>
   
   <div hidden="hidden">//隐藏属性，让任何内容隐藏掉
       div标签是实现网页布局的标签。网页中的一个区域就是一个div
   </div>
   
   <div contenteditable="true">//动态编辑属性
       你好
   </div>
    
   <input type="text" list="a">//在文本框标签中定义一个list="a"，这个时候list="a"中的a就会主动去找datalist中id="a"中的a，然后在文本框搜索中，输入一个信息就会下拉列表出现一系列相关信息
 
    //<datalist>数据列表标签</datalist>
   <datalist id="a">
       <option>ab</option>
       <option>abc</option>
       <option>bc</option>
       <option>ccx</option>
   </datalist>  
</body>
</html>

（八）HTML5的语法规则

<body>
   
   <h1>(8)HTML5的语法规则</h1>
   
   <h2>HTML语言写法的分类</h2>
   <h2>元素节点：标签</h2>
   <h2>属性节点：标签里边的属性</h2>
   <h2>文本节点：纯文本文字</h2>
    
</body>
</html>

（九）HTML标签

<title>网页标题标签</title>
<h1>标题标签</h1> 
<form>表单标签</form>
<select>下拉框标签</select>
<option>选项标签</option>
<textarea>文本域</textarea>
<table>表格标签</table>

YD_1989

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5

HTML5(一)前台核心语言(1)HTML5：超文本标记语言。定位：内容。(2)CSS3：层叠样式表语言。定位：样式。(3)JavaScript(ES6)：JS语言。定位：功能。HTML5定义：超文本标记语言。定位：内容Brackets生成HTML模板快捷键：！+ Tabhttp：超文本传输协议（一）HTML5模板<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt
复制链接

扫一扫