HTML5笔记

web入门

HTML5笔记
HTML
- 标签语法

入门基础技术点

html5 + css3 +移动web

基础环境：编辑器用vscode 浏览器用谷歌

HTML

概念：超文本标记语言 HyperText Markup Language

超文本是链接

标记也叫标签带尖括号的文本

标签语法

标签成对出现，中间包裹内容
<> 里面放英文字母也就是标签名字
结束标签比开始标签多 /

例如加粗文字

要加粗的文字

HTML 是骨架网页模板 CSS是样式 js是交互

骨架内容

html ：整个网页
head：网页头部，存放给浏览器识别的代码例如css代码
body：网页主体存放给用户看的代码，例如图片、文字
title：网页标题

vscode中快速生成骨架可以使用!+回车或则+tab

标签关系

父子关系(嵌套关系)

兄弟关系(并列关系)

html 复制代码

<html>
    <head></head>
    <body></body>
</html>

html标签与head和body就是嵌套关系

head与body就是并列关系

注释

格式：

快捷键ctrl+/

标题标签

标签名：h1~h6（双标签，中间包裹内容）

会有换行效果，级别标题

h1标签一般一个页面只出现一次作为主标题或者网页logo

h2~h6则可以多次使用

段落标签

标签名：p(双标签)

效果：形成换行效果

html 复制代码

<p>需要显示换行效果的文字</p>  a
<p>需要显示换行效果的文字</p>  b
<!--a行和b行之间会出现一行空白-->

换行标签

单标签:

水平线标签

单标签:

文本格式化标签

效果：突出重点

常见格式：加粗、倾斜、下划线、删除线等

标签名(自带强调意义)		效果
strong	b	加粗
em	i	倾斜
ins	u	下划线
del	s	删除线

都是双标签

图像标签

单标签

html 复制代码

<img src="img_URL" alt/title/width/hight>
<!--属性 :alt/title/width/hight >

属性	作用	说明
alt	替换文本	图片无法显示时显示文字
title	提示文本	鼠标悬停在图片上面的时候显示的文字
width	图片宽度	一般写数字
height	图片高度	一般写数字（图片缩放是等比例缩放）

标签名和属性之间用空格隔开属性名="属性值"

路径有绝对路径、相对路径、网络路径

超链接标签

双标签：

html 复制代码

<!--跳转到网页文件-->
<a href="https://www.baidu.com">跳转到百度</a>
<!--跳转到本地文件 并且打开新界面跳转-->
<a href="./index.html" target="_blank">跳转到index</a>

多媒体标签

音频标签

html 复制代码

<audio src="音频URL"></audio>

属性	作用	特殊说明
src ***	音频URL	mp3 、ogg、wav
controls	显示音频控制面板	controls="controls" 在html5中如果属性名和属性值完全一样可以简写为一个单词
loop	循环播放	同上
autoplay	自动播放	同上 (浏览器一般默认禁用此属性)

视频标签

双标签

html 复制代码

<video src="视频URL"></video>

常见属性 : 与音频标签的controls loop autoplay 一样支持MP4、WebM、Ogg格式多出一个muted属性 : 静音播放并且视频的autoplay需要配合着muted属性才能使用

列表标签

作用:布局内容整齐的区域

三种格式 : 无序列表(多用)、有序列表、定义列表

无序列表

标签名: ul 嵌套 li, ul是无序列表，li是列表条目

html 复制代码

<ul>
    <li>条目1</li>
    <li>条目2</li>
    ...
</ul>

有序列表

标签名: ol 嵌套 li, ol是无序列表，li是列表条目

html 复制代码

<ol>
    <li>条目1</li>
    <li>条目2</li>
    ...
</ol>

定义列表

标签名: dl 嵌套 dt 和dd , dl是定义列表，dt是定义列表的标题，dd是定义列表的描述

html 复制代码

<dl>
    <dt>标题1</dt>
    <dd>描述1</dd>
    <dd>描述1-2</dd>
    <dt>标题2</dt>
    <dd>描述2</dd>
    ....
</dl>

表格标签

标签：table嵌套 tr ，tr嵌套 td/th

在网页中，table默认没有边框线，使用border属性可以为表格添加边框线

标签名	作用
table	表格
tr	行
th	表头单元格
td	内容单元格

表格结构

用表格结构标签将内容划分区域，让表格结构更清晰

标签名	含义	说明
thead	表格头部	表头
tbody	表格主体	主要内容
tfoot	表格底部	信息汇总

具体格式如下(因为一般表格结构是否添加对于视觉无伤大雅所以一般取消表格结构直接采用表格标签)

html 复制代码

    <table>
        <thead>
            <tr>
                <th>表头</th>
            </tr>

        </thead>
    <tbody>
        <tr>
            <td>内容1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>汇总1</td>
        </tr>
    </tfoot>
    </table>

合并单元格

跨行合并添加属性rowspan (会保留最上列单元格)

取值是数字表示需要合并的单元格数量

跨列合并添加属性colspan (会保留最左列单元格)

取值是数字表示需要合并的单元格数量

注意 : 不能跨结构合并

表单标签

表单一般用于登陆注册界面

input标签

html 复制代码

<input type="...">     <!--input标签是单标签-->

属性	说明
text	文本框
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

文本框属性: placeholder 提示文字(浅色文字)密码框也能用。

单选框属性:name可以实现单选功能将需要单选的选项标签中添加属性name 属性值自定义相同的name属性值分为一组来实现单选功能; 如果想实现默认选中功能要添加属性checked 当然这个属性和属性值相同只需要添加checked即可

upload file属性:如果要上传多个属性添加multiple属性即可

**checkbox的默认选中:**同样是属性checked

input不会换行

下拉菜单

标签：select 嵌套 option ，select是下拉菜单整体，option是菜单中的每一项。

html 复制代码

  	城市: 
	<select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>

默认显示属性: selected

文本域

作用：多行输入文本的表单控件

特点是右下角可以放大缩小一般都会禁用，尺寸一般由css设置

html 复制代码

<textarea>默认提示文字</textarea>

label标签

作用：网页中，某个标签的说明文体，使用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。就像单选性别的时候点文字"男"或者"女"都能选中支持很多表单控件

写法一

html 复制代码

<input type="radio" id="man">
<label for="man">男</label>

写法二

html 复制代码

<label><input type="radio">女</label>

按钮标签

button

html 复制代码

<button type="">按钮</button>
<!--默认是submit提交按钮-->

type属性	说明
sumbit	提交按钮，提交数据到后台(默认功能)
reset	重置按钮，表单恢复默认值
button	普通按钮，默认没有功能，一般配合js使用

注意: 所有表单控件都要写在表单区域from中只有这样才能实现功能。

html 复制代码

<from action="发送数据的地址">
    ...
    ...
</from>

无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

html 复制代码

<div> 独占一行</div>

div 独占一行
span 不换行

html 复制代码

<span> 不换行</span>

字符实体

作用：在网页中预留字符

html 复制代码

空格		   &nbsp;   
<       	&lt;    
>       	&gt;