HTML自学之路

什么是HTML?
HTML(Hypertext Mark Language)超文本编译语言
说一下用的编译器，我用的是IntelliJ IDEA,大家可以去jetbrains官网下载
接下来就是

1. 创建Html5文档

<!DOCTYPE html> 
<html lang="en">        <!--HTML部分的开始-->
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
内容
</body>
</html>`

- 注释，IDEA关于注释有一个特别方便的快捷键Ctrl+/，如果想单独注释Ctrl+Shift+/，当然也可以手动输入
<!DOCTYPE html>浏览器得知自己要处理的是HTML
<html lang="en">表示文档中HTML部分的开始
<head></head>提供有关文档内容和标注信息的
<meta charset="UTF-8">编码
<title></title>标题

2. HTML基本元素
HTML元素
HTML里有这么多多多元素，当然我学的只是一点点点点。

换行<br>
粗体<b>内容</b>
斜体<em>内容</em>
下划线<u>内容</u>
删除线s>小可爱</s>
超链接

<a href="1class.html"> 内容</a>

<a href="1class.html"target="_blank"> 内容</a>

两种表达元素有什么不同呢？首先第一种是在当前页面打开超链接，而第二种则是新建一个空白页。（解释_blank的作用，这句话改一改，）

<a href="1class.html"target="https://www.baidu.com/"> 内容</a>

当然也可以跳转到其他页面，以百度为例。

3. 表格元素
表格三大元素<table><tr><td>

<table>表格元素

<tr>行元素

<td>每一行中的列元素

3.1 表格构架

<table border="1px"><!--框架大小为1px-->
    <thead><!--表头-->
    <tr>
        <td>用户名</th>
        <td>性别</th>
        <td>密码</th>
    </tr>
 </table>

效果如图
在这里插入图片描述
如果表头想加粗居中，则将代码中的<td>改为<th>

3.2合并单元格（不规则表格）
原代码为

<table border="1px">
    <tr>
        <td>aaaa</td>
        <td>aaaa</td>
        <td>aaaa</td>
        <td>aaaa</td>
    </tr><tr>
        <td>aaaa</td>
        <td>aaaa</td>
        <td>aaaa</td>
        <td>aaaa</td>
    </tr>
</table>

合并行单元格colspan

<table border="1px">
    <tr>
        <td>aaaa</td>
        <td>aaaa</td>
        <td>aaaa</td>
        <td>aaaa</td>
    </tr>
    <tr>
        <td colspan="2">aaaa</td><!--合并2个行单元格-->
        <td>aaaa</td>
        <td>aaaa</td>
    </tr>
</table>

和并列单元格rowspan

<table border="1px">
    <tr>
        <td rowspan="2">aaaa</td>
        <td>aaaa</td>
        <td>aaaa</td>
        <td>aaaa</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>aaaa</td>
        <td>aaaa</td>
    </tr>
</table>

效果如图
在这里插入图片描述
4.表单元素

<ol>有序列表，type设置样式，reversed降序
<ul>无序列表
<li>表单元素

4.1有序列表

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

倒叙的话只需在ol后面加上reversed属性

<ol reversed><!--降序-->
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ol>

也可以把数字1换成字母，罗马数字等

<ol type="I"><!--把1换成a、A、I-->
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ol>

效果如下
在这里插入图片描述

制作二级表
（只需在其中插入一个有序列表）

<ol>
    <li>一级</li>
    <ol type="a"><!--插入一个有序列表-->
    <li>二级</li>
    <li>二级</li>
    </ol>
</ol>

结果如下
在这里插入图片描述
4.2无序列表

<ul><!--无序标签，小圆点-->
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>

5.表单元素
表单是HTML中获取用户输入的手段，对于web应用系统十分重要。
关键表单元素
<form>创建HTML表单，

属性包括
method用于发送form-data的http方法
action当提交表单时向何处发送表单数据

<input>搜集用户信息，

属性包括
Type input元素的类型
Name input元素的值

5.1 单行文本框

<form>
   <input type=""><!--单行文本框-->
</form>

如果加上属性，也为默认结果

<form>
    <input type="text"><!--默认-->
</form>

结果如图
在这里插入图片描述
5.2显示文字value

显示文字，并占位（可手动删除）

<form>
    <input type="text" value="输入密码" required="required">
</form>

显示文字，但不占位paceholder

<form>
    <input type="text" placeholder="输入密码">
</form>

二者效果如下
在这里插入图片描述
5.3调节文本框长度以及最大输入文字

最大输入字符个数（最大为8字符）maxlength

<form>
    <input type="text" placeholder="输入密码" maxlength="8">
</form>

拓宽单行文本框（拓宽为50字符）size

<form>
    <input type="text" placeholder="输入密码" size="50">
</form>

5.4只可读文本，文字不可修改readonly

<form>
    <input type="text" value="输入密码" readonly><!--只读，不可删除-->
</form>

5.5隐藏密码

<form>
    <input type="password" placeholder="输入密码">
</form>

效果如下
在这里插入图片描述
但虽然密码看起来不为人知，但实际上是以明文传输到服务器的！

5.6多行文本框textarea

<form>
    <textarea >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</textarea>
</form>

在这里插入图片描述
Chroms浏览器对此有一个优化功能，即可以滑动。

增加文本框宽度（假定为20行）rows

<form>
    <textarea rows="20">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</textarea>
</form>

增加文本框长度cows

注：在不同浏览器多行文本框打开方式是不一样的。

6.按钮属性
type=“button”

<button></button>

6.1按钮

创建一个内容为“按钮的”按钮

<form>
    <input type="button" value="按钮">
</form>

与javascript合作并且作为绑定事件（button要比input功能多，button可以当任何按钮使用，适用范围更广一些）

<form>
    <button>按钮</button><!--js合作并且作为绑定事件的-->
</form>

提交交单submit适用范围比input button范围小一点

<form>
    <input type="submit" value="提交"><!--提交表单-->
</form>

input submit用于提交表单时，必须声明form里面的method属性，最好也添加action属性（涉及php内容，只做参考）
适用范围及功能：button>input button>input submit

6.2滑表 type="range"

创建一个滑表

<form>
    <input type="range"><!--滑表-->
</form>

结果如图(不同浏览器显示效果不一样)
在这里插入图片描述

改变滑表的最大max/小值min，以及初始值value，上下调节数值的步长step

    <form>
        <input type="range" min="-100" max="100"><!--最大/小值-->
        <input type="range" min="-100" max="100" value="-100"><!--初始值-->
    </form>

可手动输入数值的滑表

<form>
    <input type="number" min="-100" max="100" value="-100"><!--手动输入-->
</form>

结果如图
在这里插入图片描述
6.3复选框 type="checkbox"

选中且可以取消（正方形）

<form>
    <input type="checkbox">选择1<!--可以取消-->
</form>

选中但不可取消（小圆圈）

<form>
    <input type="radio">选择2<!--不可取消-->
</form>

编译如下
在这里插入图片描述

三选一

<form>
    <input type="radio" name="a" checked>选择1
    <input type="radio" name="a">选择2
    <input type="radio" name="a">选择3
</form>

name="a"为了控制只能选择1项，注意name""中的值要一样
checked属性无属性值，指网页进入时默认选项，即使提交为空，输入即为默认值
结果如图
在这里插入图片描述

生成选项列表<select>

<form>
    <select>
        <option>选择1</option>
        <option>选择2</option>
        <option>选择3</option>
    </select>
</form>

注：此结果不能修改选项，结果如下
在这里插入图片描述
如果想获取用户输入项，则需加入

 <input type="text" list="datalist">
 <datalist id="datalist">

<form>
    <input type="text" list="datalist">
    <datalist id="datalist">
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
    </datalist>
    </select>
</form>

注：datalist在数据中并没有任何显示，必须搭配单行文本框使用，并且datalist要设置其id属性，id属性就是datalist唯一的“身份证”。在单行文本框中引用datalist要使用list属性，并且属性值就是datalist的id值才能完成datalist的使用。

关于Select和datalist
共同点：都能提供内容值，并且提供内容项的元素都是
不同点：select无法获取用户输入的文本，只能从选项中选取，而datalist不仅可以选出想要的，还可以手动输入选项中没有的。

7.用input获取

用input获取有规定格式的字符串
email有效电子邮件地址
tel有效电话号码
url有效网址

<form>
    <input type="email"><!--有效电子邮件地址-->
    <input type="tel"><!--有效电话号码-->
    <input type="url"><!--有效网址-->
</form>

用input获取时间

<form>
    <input type="date">
</form>

在这里插入图片描述

用input获取颜色

<form>
    <input type="color">
</form>

在这里插入图片描述

用input获取搜索用词

<form>
    <input type="search">
</form>

用input生成隐藏的数据项（hidden）——提交表单时依旧存在

<form>
    <input type="hidden" value="123">
</form>

用input生成图像按钮
首先选择一张合适的图片（文件名download.jpg），拖进文件夹中

<form>
    <input type="image" src="download.jpg" width="40px">
</form>

src地址
width宽度
显示如下
在这里插入图片描述

用input获取文件

<form>
    <input type="file" multiple>
</form>

multiple一次允许上传多个文件
required只能上传一个文件
注：当使用input元素上传文件提交表单时，要设置如下内容

<form enctype="multypart/form-data"></form>

8.嵌入图片与创建分区响应图
元素<img>
属性
src设置图片的位置、显示图片
width height 宽度、高度
alt 设置图片的备用内容

8.1显示图片

<img src="download.jpg" width="128px" height="200px">

设置备用文字alt（当图片不存在或找不到时，可以显示备用文字）

<img src="download.jpg" width="128px" height="200px" alt="下载按钮">

效果如下
在这里插入图片描述

8.2 点击图片跳转到超链接：把image元素包含在<a>标签里面。

<a href="https://www.baidu.com/" target="_blank">
    <img src="download.jpg" width="128px" height="200px" alt="下载按钮">
</a>

点击图片即可跳转到百度页面

8.3创建客户端分区响应图（难点）：通过点击某张图像上不同区域让浏览器到不同的URL上
元素
map客户端分区响应图的关键元素
area可以有多个，每个各自代表图像上可能点到的区域
area元素属性

点击后导航到指定url

herf该区域被点击时浏览器应加载的url
alt定义图片的备用内容

shape属性和coords属性，共同起作用。
react矩形区域，用四个逗号分割的整数组成，分别代表左上右下

<img src="timg.png" usemap="#map1">
<form>
    <input type="image"src="timg.png">
</form>
<map name="map1">
    <area href="https://www.baidu.com/" shape="rect" coords="34,53,158,175" target="_blank">
</map>

<img src="图片链接地址" usemap="#map1">创建分区响应图必须要有img元素，并且img元素必须包含src属性和usemap属性
<input type="image"src="timg.png"> 显示要选出图片的地址，如图
在这里插入图片描述
可在网址中观察x、y轴坐标，并在coords元素中标出
注意name后的元素要与usemap后的元素一致
可以有多个area元素，来点击图片不同区域

circle圆形区域，三个逗号分割的整数组成，分别代表图像左边缘到圆心的距离。右边缘到圆心的距离，圆的半径
poly代表一个多边形，至少包含6个逗号分隔的整数组成，每一对数字各代表多边形的一个顶点
default代表默认区域，也就是覆盖整张图案，不需要coords值

9.HTML嵌入视频
元素<video>
属性
src视频地址来源
width视频宽度
height视频高度
autoplay网页完成后自动播放视频
preload预先载入视频
control除非设置该属性，否则不显示播放控件
loop视频循环播放
poster视频载入时显示图片
muted视频静音

显示视频并自动播放autoplay

<video src="shipin.mp4" height="500px" autoplay>
</video>

显示各个控件controls

<video src="shipin.mp4" height="500px" controls>
</video>

如图
在这里插入图片描述

预先加载视频（缓冲）
none不会载入
metadata只载入第一帧
auto请求下载整个视频，浏览器可忽略

<video src="shipin.mp4" height="500px" controls preload="none">
</video>

视频载入时显示图片poster

<video src="shipin.mp4" height="500px" controls preload="none" poster="timg.png">
</video>

网页刚打开时视频加载的图片即为插入图片

设置视频格式

浏览器支持视频格式
在这里插入图片描述
没有一种格式可以支持所有浏览器，最简单的方法是要有Mp4与Ogv两种影音格式，所以要设置视频格式：将源文件用视频转码工具转换形式（推荐使用视频转换王）

在video中插入两个视频

<video src="shipin.mp4" height="500px" controls preload="none" poster="timg.png">
    <source src="shipin.mp4" type="video/mp4">
    <source src="shipin.ogv" type="video/ogg">
</video>

即如果第一个格式不支持，浏览器自动跳转到第二个格式.

猜你喜欢