HTML教程:https://www.w3school.com.cn/html/index.asp (分享链接)
标签的属性:多个属性中间用空格
标签分类:块状元素、行级元素
块状元素:一般都是新起一行,可以容纳行内元素和其他块级元素;
块状元素和行内元素的区别:
基本结构:
常用标签:
文本标签<h1></h1>
段落标签 <p></p>
换行标签<br/>
水平线标签 <hr/>
范围标签<span></span>
图片标签<img 属性 />
图片标签的热点区域<map name="?" /> <atea 形状 范围 链接 标题 / >
列表标签:无序<ul> <li> <li/> <ul/> 有序<ol> <li> <li/> <ol/>
描述标签 :图文混编 <dl> <dt>(文字或图片)<dt/><dd>(文字说明多个)<dd/> <dl/>
布局标签:<div>中间放其他标签的容器<div/>
超链接和锚链接:<a><a/>
属性 name:锚点 herf:目标(网页#锚点)
规则表格:<table> <tr > <td><td/> <td><td/> <tr/> <table/> <th>标题行<th/>
align 左右对齐 valign 上下对齐
不规则表格:
属性 colspan="列数" rowspan="行数" 然后把被占的格删掉
高级标签:标题和逻辑分区标签
表格标题:<caption>标题文字<caption/>
表格逻辑分区:thead tbody tfoot
表单:
文本框:
密码框:
单选按钮:
复选框:
文件域:
日期-h5中的新特性 :
隐藏域:
下拉列表框:
文本域:
按钮:
提交按钮、图片按钮、重置按钮、普通按钮
最终效果:
地址栏内容:
框架: 在一个页面引入其他页面 iframe
框架集:HTML5已经取消
常用的布局组合标签:
HTML4和HTML5的区别:
<form action = "" autocomplete = "on" >姓名: <input type = "text" name = "name" ><br>电话: <input type = "text" name = "phone" ><br>邮箱: <input type = "email" name = "email" autocomplete = "off" ><br><input type = "submit" ></form>测试的时候需要先输入一遍,然后再刷新页面再次输入看到效果。有些浏览器可能不自动支持,需要自己启用。
<input list = "companys" ><datalist id = "companys" ><option value = "alibaba" ><option value = "baidu" ><option value = "tencent" ><option value = "zijie" ><option value = "didi" ></datalist>
上传多个文件 : <input type="file" name="img" multiple>
<input type = "text" name = "userName" placeholder = " 请输入用户名 " >
用户名 : <input type = "text" name = "username" required >
标签 描述datalist input标签定义选项列表。与 input 元素配合使用,来定义 input 可能的值。keygen 规定用于表单的密钥对生成器字段。output 标签定义不同类型的输出,比如脚本的输出。
<audio controls ><source src = "horse.ogg" type = "audio/ogg" ><source src = "horse.mp3" type = "audio/mpeg" >您的浏览器不支持 audio 元素。</audio>PS : control 属性供添加播放、暂停和音量控件。在 <audio> 与 </audio> 之间你需要插入浏览器不支持的 <audio> 元素的提示文本 。<audio> 元素允许使用多个 <source> 元素 . <source> 元素可以链接不同的音频文件,浏览器将使用 第一个支持的音频文件
Format MIME-typeMP3 audio/mpegOgg audio/oggWav audio/wav
<video width = "320" height = "240" controls ><source src = "movie.mp4" type = "video/mp4" ><source src = "movie.ogg" type = "video/ogg" >您的浏览器不支持 Video 标签。</video><video> 元素提供了 播放、暂停和音量控件来控制视频。同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸 . 如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。<video> 与 </video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
Format MIME-typeMP4 video/mp4Ogg audio/oggWebM video/webm
<!DOCTYPE html><html><head><meta charset = "UTF-8" ><title> 视频音频 </title></head><body><h1> 音频 </h1><audio controls ><source src = "audio/wgs.ogg" type = "audio/ogg" ><source src = "audio/zjl.mp3" type = "audio/mpeg" >您的浏览器不支持 audio 元素。</audio><h1> 视频 </h1><video width = "1320" height = "640" controls ><source src = "audio/ruhai.mp4" type = "video/mp4" ><source src = "audio/wgs.ogg" type = "video/ogg" >您的浏览器不支持Video标签。</video></body></html>
转义符号: