HTML基础—常用标签

一、参考资料

1、视频链接

尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频_哔哩哔哩_bilibili

二、常用标签

1 实体

          空格

        > 大于号

        < 小于号

        HTML 字符实体

2 meta标签

        主要是用于设置网页中的元数据，元数据是用户看不到的

        charset 指定网页的字符集 

        <meta name = "keywords" content ="网上购物，网上商城"> 搜索引擎中输入关键字即可搜到网站。

        <meta name = "description" content = "京东-JD.COM- 专业购物网站" > 搜索引擎的结果中标题（标题为<title></title>中内容）下方会显示网站描述。

        <meta http-equiv = "refresh" content = "3;url=https://www.baidu.com" > 页面重定向，3秒后跳转到百度

3  乱码问题

        txt编码为 GB2312

        VS-code  编码 utf-8 编码不同会造成乱码 

4 块元素和行内元素

        块元素

        在网页中一般通过块元素对页面进行布局

        一般情况下块元素中放行内元素，不在行内元素中放块元素

        p元素中不能放任何块元素

        （浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正）

        布局标签：

                header标签 表示网页的头部 （整体的头部、部分的头部）

                main标签 表示网页的主体部分（一个页面只有一个main）

                footer标签 表示网页的底部（整体的底部、部分的底部）

                nav标签 表示网页中的导航 

                aside标签 表示和主体相关的其他内容

                article标签 表示一个独立的文章

                section标签 表示一个独立的区块（上面都不合适的时候用section）

                以上标签都是h5新增的标签，目前使用较少，div使用最多。

                 div 没有语义，就用来表示一个区块，目前是最常用的布局元素

                span 行内元素，没有语义，一般用于网页中选中的文字

5 列表

        无序列表

                <ul><li></li></ul>

        有序列表

                <ol><li></li></ol>

        结构列表

                <dl><dt></dt><dd></dd></dl>

        列表之间可以相互嵌套

6 超链接

        超链接是一个行内元素，a标签中可以嵌套除它自身以外的任何元素

        跳转路径，当需要跳转一个服务器内部页面时，一般都会使用相对路径

                相对路径以 ./ 或  ../ 开头 

                ./   可以省略不写  表示当前文件所在目录

                ../  表示当前文件所在目录的上一级目录 (都可以通过文件夹继续往下找)

        target 属性，用来指定超链接打开的位置

                默认值：target = "_self"  当前窗口显示页面

                可选值：target = "_blank" 打开一个新的窗口

        href = "javascript:;" 点击后没有反应

        页面内跳转

        href = "#"  跳转到当前页面的顶部位置

        href = "#id"  根据id跳转到标签位置

7 图片标签（替换元素）

        src属性：属性指定的是外部图片的路径，可以是内部也可以是外部路径

        alt属性：一些浏览器在图片无法加载时会显示文字；搜索引擎中会根据alt内容来识别图片

        宽度和高度如果只修改一个，另外一个会等比例缩放；一般情况下，pc端不建议修改图片大小，大图缩小浪费内存，小图放大失真；移动端屏幕会经常对图片放大，一般要放分辨率较大的图片。

        图片格式：

                jpg -颜色丰富、不支持透明，不支持透明，适宜照片

                gif -颜色较少，支持简单透明，支持动图，适宜动画和单一图片

                png -颜色丰富、支持复杂透明，不支持动图，适宜更广

                webp -谷歌推出的专门表示网页中的图片的一种格式，具备其他格式图片的优点，缺点是兼容性较差

                base64 -将图片使用base64进行编码，可以将图片转换为字符，然后通过字符来引入图片（src = "编码"），使用场景：需要网页和和图片一同显示时使用（与网页内容一起展示）

8 音频标签（替换元素）

        audio 标签（IE8及以下不支持） 向页面引用一个外部的音频文件，默认不允许用户自己控制播放停止

        controls 是否允许用户控制播放 无值属性

        autoplay 音频文件是否自动播放（部分浏览器不支持）无值属性

        loop 是否循环播放 无值属性

        <audio controls>

                对不起，浏览器不支持播放音频

                <source src = "1.mp3">  

                <source src = "1.ogg">  如果 1.map3 浏览器不支持，则使用1.ogg格式，软件兼容性更好

        </audio>

        兼容主流并且兼容IE8

               <audio controls>

                        <source src = "1.mp3">  

                        <source src = "1.ogg">  如果 1.map3 浏览器不支持，则使用1.ogg格式，软件兼容性更好

                        <embed src= "1.mp3" type="audio/map3" />

                </audio>

                video 视频标签同理

                如果本地服务器内存较小，且音视频文件较大，为了节约服务器成本，加快显示速度，可以通过第三方平台托管音视频文件，减小本地服务器压力，会减少一定成本；或者将视频传到优酷腾讯等网站上，通过iframe进行引用

9 表格

        table标签创建表格

                tr表示表示行 ，几个tr就代表几行

                td表示单元格，几个td就代表几列

        table

                tr

                        td td

                tr

        td  colspan=2  横向合并两个单元格

        td  rowspan=2 纵向合并两个单元格

长表格

        table

                thead 

                        tr td td tr     (td 可以替换为th  文字加粗)

                tbody

                        tr td td td

                tfoot

                        tr td td td

表单

        <form action="" autocomplete="off">  action 表单提交的服务器地址，autocomplete 关闭提示的自动补全， readonly 数据设置为只读，但会提交， autofocus 设置光标所在焦点，disabled 设置表单禁用，不会提交数据

                <input type="text" name ="username"> 数据要提交到服务器必须为元素指定一个name

               <input type="email" name="emai"  > 兼容性较差一般不用（移动端作用较好）

                单选按钮

                <input type="radio" name="gender" value="男">

                <input type="radio" name="gender" value="女">

                        若radio 的name 相同，则按钮变成单选按钮 checked 表示默认选择

               

                多选按钮

                <input type="checkbox" name = "profession" value="老师">

                <input type="checkbox" name = "profession" value="医生">

                 <input type="checkbox" name = "profession" value="学生">

                <input type="submit" value="注册">

                <input type="button" value="登录">

                <input type="reset" value="重置"> 点击后form内都恢复默认值

        </form>