HTML

这是我参与「第四届青训营」笔记创作活动的的第1天

前端技术栈

HTML（内容）+CSS（样式）+Javascript（行为）

1. 概述

一种超文本标记语言（Hyper Text Markup Language）

2. 文档结构

<!DOCTYPE  html>                       	 <!--文档类型声明-->
<html lang=”zh-cn”>                  	 <!--表示文档开始（英文用en）-->
<head>                                   <!--包含文档元素据开始（不可见）-->
	<meta charset=”utf-8”>           <!--声明字符编码-->
	<title>基本结构</title>           <!--设置文档标题-->
</head>                                  <!--包含文档元素据结束-->
<body>                                   <!--表示HTML文档内容（可见）-->
xxxxxxxxxxxxx
</body>                                   
</html>                                  <!--表示文档结束-->

3. DOM树

图片.png

4. 列表

有序列表 => <ol>

无序列表 => <ul>

定义列表（键值结构） => <dl>

<dt>总描述 <dd>对dt的描述（dt dd 多对多）

5.超链接

属性名称	说明
href	指定元素所指资源的URL
hreflang	指向的链接资源所使用的语言
media	说明所链接资源用于哪种设备
rel	说明文档与所链接资源的关系类型
target	指定用以打开所链接资源的浏览环境

target属性

属性名称	说明
blank	在新窗口或标签页中打开文档
parent	在父窗框组(frameset)中打开文档
_self	在当前窗口打开文档（默认）
_top	在顶层窗口打开文档

6. 多媒体标签

1）音频`<audio>`

属性：

controls 控制面板

autoplay 自动播放

loop循环

  <audio src="" controls></audio>

2）视频`<video>`

属性：

controls 控制面板

autoplay 自动播放

loop 循环

width 宽度

height 高度

poster 当视频还没有完全下载，或者用户还没有点击播放前的默认显示的封面

注意： 设置宽高时，只能设置宽度或高度，让其自动的等比缩放

<video src="" controls></video>

source使用：

不同浏览器支持的视频文件格式不一样，可准备多个格式的视频文件，让浏览器自动选择

<video src="">
    <source src="xxx.flv" type="video/flv">
</video>

7. 表单元素

举例如下： select与datalist

<body>
    <form action="">
        <!-- 专业:
        <select name="" id="">
            <option value="1">前端与移动开发</option>
            <option value="2">java</option>
            <option value="3">javascript</option>
            <option value="4">c++</option>
        </select> -->
        <!-- 不仅可以选择,还可以输入 -->

        专业: <input type="text" list="subjects">
        <!-- 建立输入框和datalist的关联 list="datalist的id" -->

        <!-- 通过datalist创建选择列表 -->
        <datalist id="subjects">
            <!-- 创建选项值 value:具体的值 label:提示信息,辅助值 -->
            <!-- options可为单标签 -->
            <option value="英语" label="11">    
            <option value="前端与移动开发" label="好"></option>
            <option value="java" label="很好"></option>
            <option value="javascript" label="太好了"></option>
            <option value="c++" label="真的很好"></option>
        </datalist>

        <!-- 若input输入框为url类型 option中value值必须添加https:// -->
    </form>
</body>

8. 引用标签

<cite>

<q> 行内元素，内容的开始结尾处有""

<blockquote> 块级元素，引用长文本

9. 语义化

HTML中的元素、属性及属性值都拥有某些含义

语义标签：

标签	语义性
nav	导航
header	页眉
footer	页脚
main	文档主要内容
article	文章
aside	主题内容以外

HTML | 青训营笔记