HTML笔记（完结）

HTML基础部分
HTML(Hypertext Markup Language 超文本标记语言)
网页大致可以分为结构（HTML）表现（CSS）行为 (JS)
元素和标签是一样的，元素就是标签，标签就是元素。

基础元素**（代码注释方法：ctrl+/ 文字注释方法：ctrl+shift+/ 或者用尖括号里面加!-- – 的中间表示煮熟）**

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>

</body>
</html>

doctype元素，独一无二的，都以他为开头。可以注释掉，不影响网页，但是在源代码中还是会显示

：h5文档声明，声明该网页是按照h5标准写的

[2]
根元素
lang=en代表语言是英文的
[3]
头元素
meta元素：提供多字访问，源数据
charset元素，UTF-8编码：编码的，保证不会出现乱码
title元素标题
[4]
body元素内容都在body元素中输入，面向对象的，网页中可以输出的
标签可以嵌套，但是不可以交叉嵌套
单位：px，百分比，em
其中百分比是相对其父元素的百分比，
em和百分比类似，相对于当前元素字体大小，1em=1 font size，当字体大小发生变化是，em也随之发生变化

2.body元素（br/可以用来换行）

h1元素：一级标题，重要性仅次于title标签，将文字以较大的形式输出（还有h2—h6，字体逐渐变小）

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<h1>世界如此美好</h1>
</body>
</html>

在这里插入图片描述

p标签：表示一个段落，一个标签独占一行，自动换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>a</p>
    <b>lalala</b>
    <b>lalala</b>
</body>
</html>

在这里插入图片描述

b标签：粗体

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<b>你却如此暴躁</b>
</body>
</html>

在这里插入图片描述

em元素：斜体（强调语气）
strong元素：粗体（强调内容）
对于H5中规定，对于不需要着重的内容而是单纯的加粗或者是斜体就可以用b和i标签
H5中使用small标签来表示一些细则一类的内容，比如：合同中的小字，网站的版权声明
small便签的内容会比他的父元素中的文字要小一些

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<em>不好不好</em>
</body>
</html>

在这里插入图片描述

cite标签（网页中所有的加书名号的内容都可以用cite标签，表示参考的内容）
q标签（表示一个短的引用即行内引用，q标签引用的内容，浏览器默认会加上引号）
blockquote标签（表示一个长引用即块级引用）
sup标签（表示上标）
sup标签（表示下标）
del标签（表示一个删除的内容，del标签中的内容，会自己添加删除线）
ins标签（ins内容会自动添加下划线）
需要页面中直接编写一些代码，pre是一个预格式标签，会将代码的格式保存，不会忽略多个空格，code专门用来表示代码，我们一般结合使用pre和code来表示一段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <p>赵薇<sup><a href="500294514.jpg">[1]</a></sup></p>
        <p>H<sub>2</sub>O</p>
        <p>
            <del>19.99</del>
            <br>
            16.66
        </p>
</body>
</html>

在这里插入图片描述

u元素：下划线(但是HTML5不推荐使用)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<u>啦啦啦啦</u>
</body>
</html>

在这里插入图片描述

s元素：文字中间有一道线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<s>爱冒险的梦</s>
</body>
</html>

hr标签（自结束标签，生成一条水平线）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>a</p>
    <p>a</p>
    <hr/>
</body>
</html>

在这里插入图片描述

实体（一些特殊元素不能使用，例如大于号之类的，因为与标签冲突，所以一般用一些特殊符号表示，这些特殊符号称为实体，又叫转义字符串）
< &lt； > &gt；空格 &nbsp；版权符号：&copy；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    a&gt;b
    <br/>
    a&lt;b
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    &copy;爱冒险的梦
</body>
</html>

在这里插入图片描述

a标签：构成超链接,后面href属性代表所链接的url；有target属性，又分为blank属性和self属性；blank属性:构成的url点击后以新的窗口打开。self属性即默认属性，就是在当前网页中进行打开url。（超链接可以用#做占位符，可以跳转到顶部）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="500294514.jpg" target="_blank">选这个</a>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="500294514.jpg" target="_self">选那个</a>
</body>
</html>

在这里插入图片描述

table 元素（表格元素）
tr元素：代表着表格中的一行；可以嵌套着td元素，代表着一个单元格
th元素：标题，字体加粗，且居中
border属性：边框属性，但是不推荐使用，后面可以跟1px，代表着1像素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px">
    <tr>
        <td>AAA</td>
        <td>BBB</td>
        <td>CCC</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px">
    <tr>
        <th>AAA</th>
        <th>BBB</th>
        <th>CCC</th>
    </tr>
</table>
</body>
</html>

在这里插入图片描述
拆分单元格
colspan用来合并行;
rowspan用来合并列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px">
    <tr>
        <td>AAA</td>
        <td>BBB</td>
        <td>CCC</td>
    </tr>
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述
行合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px">
    <tr>
        <td>AAA</td>
        <td>BBB</td>
        <td>CCC</td>
    </tr>
    <tr>
        <td>aaa</td>
        <td colspan="2">ccc</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述
列合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px">
    <tr>
        <td rowspan="2">AAA</td>
        <td>BBB</td>
        <td>CCC</td>
    </tr>
    <tr>
        <td>bbb</td>
        <td>ccc</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

列表元素（li：列表中的项）（有序列表和无序列表可以互相嵌套）
有序列表ol（默认升序，可以进行嵌套的，在一个有序列表中可以嵌套多个有序列表，从而实现标题的整齐）

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<ol>为什么喜欢我
   <li>你长得太好看</li>
   <li>你也太可爱了</li>
   <li>无需理由</li>
</ol>
</body>
</html>

在这里插入图片描述
reversed元素：html最新元素，实现列表可以降序排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ol reversed>为什么喜欢我
    <li>你长得太好看</li>
    <li>你也太可爱了</li>
    <li>无需理由</li>
</ol>
</body>
</html>

在这里插入图片描述
type元素：可以改变排序的前标，是123还是ABC都可以选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ol type="A">为什么喜欢我
    <li>你长得太好看</li>
    <li>你也太可爱了</li>
    <li>无需理由</li>
</ol>
</body>
</html>

在这里插入图片描述

无序列表（ul）顺序用黑点排列（由于每个浏览器的符号大小不一样，所以我们一般都不用默认的符号，用css中ul的list-type的none去掉）ul和li都是块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
</body>
</html>

在这里插入图片描述

定义列表（dl dd dt来创建一个定义列表）
dl有两个子标签，dt为被定义的内容，dd是对定义内容的描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <dl>
            <dt>中国</dt>
            <dd>最强大的国家</dd>
        </dl>
</body>
</html>

表单元素 form元素（用户可以自己输入东西进去，就相当于填写账号密码的那种）
- method属性
- input元素
- action属性
- textarea元素
- select属性
- datalist属性

input元素（单行文本框，有29种属性）

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<form>
   <input>
</form>
</body>
</html>

在这里插入图片描述
text属性（默认就是text属性）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<form>
  <input type="text">
</form>
</body>
</html>

效果图和上面一样

value属性（占位符，自动填充上所写的字）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input type="text" value="喜欢点个赞好吗">
</form>
</body>
</html>

在这里插入图片描述
placeholder属性（不占文本框位置的，就相当于那个密码账号的提示，没点进去之前是暗的，点进去会没）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input type="text" placeholder="密码">
</form>
</body>
</html>

在这里插入图片描述

maxlength属性（最大字符数，超过就输不进去）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input type="text" maxlength="8">
</form>
</body>
</html>

在这里插入图片描述
size属性（拓宽单行文本框，文本框显示所规定的字符数）
readonly属性（只读）

type中password属性（placholder）实现以黑点形式出现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input type="password" placeholder="密码">
</form>
</body>
</html>

在这里插入图片描述

type中button属性（按钮属性）
分为三种形式：1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input type="button">
</form>
</body>
</html>

2.button按钮（和js合作，用来绑定事件的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <button></button>
</form>
</body>
</html>

3.提交按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input type="submit">
</form>
</body>
</html>

在这里插入图片描述
type中range属性（数字滑动块）
max:滑块最大值
min:滑块最小值
step:每次滑动的距离
value：起始的位置，默认为0，在滑表的中间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input type="range" >
</form>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input type="range" step="12" max="200" min="-100" value="0">
</form>
</body>
</html>

type中number属性(可以手动输入的，可以调节大小的值)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input type="number" min="0" max="100" value="90">
</form>
</body>
</html>

在这里插入图片描述

type中checkbox属性（相当于打对勾的功能，只有选择才能传输到服务器中去，传送到服务器上是布尔型）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input  type="checkbox"选择 >
</form>
</body>
</html>

在这里插入图片描述

type中radio属性（和checkbox功能一样，但是这个选择后就不能取消了，生成一组固定选项）
name属性，当多个选项出现时，由name选项可以实现三选一的效果
checked属性，默认一个选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>你最喜欢的水果
    <br/>
    <input type="radio" name="a">苹果
    <input type="radio" name="a"">葡萄
    <input type="radio" name="a">芒果
</form>
</body>
</html>

这样就实现三选一的效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>你最喜欢的水果
    <br/>
    <input type="radio" name="a" checked>苹果
    <input type="radio" name="a"">葡萄
    <input type="radio" name="a">芒果
</form>
</body>
</html>

在这里插入图片描述
这样当什么都不选的时候，默认选择第一个

select元素（可以进行选择，但是不可以自己输入）
option元素：可供选择的项

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<form>你最喜欢的水果
   <select>
       <option>香蕉</option>
       <option>橙子</option>
       <option>西瓜</option>
   </select>
</form>
</body>
</html>

在这里插入图片描述

datalist元素(实现选择，类似是select，但是这个可以自己输入，不过要用id引导)
用id引导后，用input元素中的list属性来进行引导

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>你最喜欢的水果
    <input type="text" list="1">
    <datalist id="1">
        <option>香蕉</option>
        <option>西瓜</option>
        <option>橙子</option>
    </datalist>
</form>
</body>
</html>

在这里插入图片描述

type中的data元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>你最喜欢的水果
    <input type="date">
</form>
</body>
</html>

在这里插入图片描述

type中的color元素

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<form>
   <input type="color">
</form>
</body>
</html>

在这里插入图片描述

input的hidden属性
隐藏某些东西，但是在提交表单中还是会显示，value输入值
input的image属性
实现图片按钮功能，导入图片，src属性代表地址的选择，width代表图片的宽度

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<form>
   <input type="image" src="500294514.jpg"  width="80px">
</form>
</body>
</html>

type中的file按钮上传文件

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<form>
   <input type="file">
</form>
</body>
</html>

在这里插入图片描述
multiple属性：可以上传多个文件
required属性：必须上传一个文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input type="file" multiple>
</form>
</body>
</html>

在这里插入图片描述

img标签即图片标签，引入外部图片，src属性是图片的地址，也就是图片路径（相对路径，相对于当前资源所在目录的位置，如果图片在当前网页的上一个文件夹，可以用…/来返回上一级例：…/2.gif）width属性是宽度，height属性是高度（一般开发不设置这两个图片，设置了图片可能会失真），alt是设置图片的备用内容，设置图片的描述
（当图片找不到时候，会出现alt备用的内容，搜索引擎会通过alt属性来识别不同的图片，如果没有alt属性，搜索引擎不会对img图片进行收录）
img属性和a标签相结合构成图片可以点击进入url

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<form>
   <a href="0722.1html.html" target="_blank">
       <img src="500294514.jpg" width="100px">
   </a>
</form>
</body>
</html>

客户端分区相应图
map元素（客户端分区响应图的关键元素）
area元素（可以有多个，每个代表图像上可以被点击的一部分）
area元素分为两类
第一类：点击后导航到指定的URL
第二类：shape元素和coords元素，起共同作用
shape值有四个：rect矩形区域 coords：代表矩形区域，用四个整数隔开，四个整数分别是图像左边缘，图像上边缘，图像右边缘，图像下边缘
circle圆形区域 coords：图像左边缘到圆心的距离，图像右边缘到圆心的距离，圆的半径
poly多边形区域 coords：至少六个逗号，每个是顶点
default覆盖整个区域 coords：无数据
map能起作用，要使用usemap属性。先map个name，再usemap使用，后面加#name，不用a标签构成超链接，定位响应区域用image的input定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input元素</title>
</head>
<body>
 <form>
     <input type="image" src="20(2).png" width="400px">
 </form>
<img src="20(2).png" width="400px" usemap="#lalala">
<map name="lalala">
    <area href="0722fuxi.html" shape="rect" coords="15,15,137,130" target="_blank">
</map>
</body>
</html>此时点击响应的部分会跳转到设定的url上了

video元素中基本属性
src：视频地址
height：视频高度
width：宽度大小
autoplay：自动播放
contros：播放控制键

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<video src="001_如何学习JAVA300集（一定要看…………）.mp4" controls height="440" width="600px"></video>
</body>
</html>

在这里插入图片描述
preload：预先载入视频 none：不会载入视频。metadata：只载入第一帧。
auto：请求下载整个视频，默认行为。loop：循环播放。poster：视频载入时显示图片，视频的封面。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<video src="001_如何学习JAVA300集（一定要看…………）.mp4" controls height="440" width="600px" poster="500294514.jpg"></video>
</body>
</html>

在这里插入图片描述
因为没有一个浏览器支持所有视频格式，所以我们要把mp4和ogv两种格式
source元素：设置视频格式的元素，包括src和type属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video src="001_如何学习JAVA300集（一定要看…………）.mp4" controls height="440" width="600px" poster="500294514.jpg">
    <source src="001_如何学习JAVA300集（一定要看…………）.mp4" type="video/mp4">
    <source src="001_如何学习JAVA300集（一定要看…………）.ogv" type="video/ogg">
</video>
</body>
</html>此时所有的格式浏览器都可以使用

audio元素(插入音频)
src：音频地址，autoplay：自动播放
source元素（设置元素格式）有两个属性 src属性：地址，type属性：格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<audio src="001_如何学习JAVA300集（一定要看…………）.mp3" controls ">
    <source src="001_如何学习JAVA300集（一定要看…………）.mp3" type="audio/mp3">
    <source src="001_如何学习JAVA300集（一定要看…………）.ogg" type="audio/ogg">
<audio/>
</body>
</html>

猜你喜欢