title标签

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>百度一下，你就知道</title>
  5. </head>
  6. </html>

<title></title> 标签是写在 <head></head> 标签里面的,他的功能是在浏览器显示你的网页名字，如图
image.png

meta标签

<meta> 标签和其他标签不一样，并不是成对出现的。该标签用来描述一个网页的文档属性，例如作者，日期和时间，关键词，页面刷新。除此之外，还用于搜索引擎优化（SEO）。它位于HTML文档中 <head></head> 标签内，用户是不可见的，具体的标签属性及其功能请点击如何正确使用meta标签

p标签

<p></p> 标签的意思是pargraph，能让标里的内容成段展示

<body>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
</body>

显示效果：
image.png

h1-h6标签

<h1></h1> h1-h6是标题标签，一级标题到六级标题。独成一段，字体加粗

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
</body>

显示效果：
image.png

strong标签

<strong></strong> 标签能让里面的字体加粗

em标签

<em></em> 标签能让里面的字体变成斜体

del标签

<del></del> 标签能让里面的字体加上横线

div标签

<div></div> 标签没有具体的效果，充当一个容器，让页面更加结构化，独占一行

span标签

<span></span> 标签没有具体的效果，充当一个容器，不独占一行

br标签

<br></br> 标签标识回车，换行的意思

ol标签,li标签

<ol><li></li></ol> 这叫做有序列表，他与之前的标签不同的是，它们是成组出现的，有ol标签包裹多个li标签
可以给ol标签添加type属性从而改变排序的样式，如果type=”1”就是按数字排序，type=”A”就是按字母排序，如果想从某个位置开始排序，可以添加start属性, start = “2”表示从第二个开始排序。 如果想要从后往前排序，可以填加reverse属性

<body>
    <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
</body>

显示效果:
image.png

ul标签

<ul><li></li></ul> 标签也是跟li标签一起成组出现，它的意思是无序列表。

img标签

<img src=" " atl=" " title=" "> 是一个单标签， 是用来添加图片的，alt属性是当图片出错的时候展示的文字信息，即图片占位符 ,title属性是图片提示符， src属性写图片的地址。地址有几类
1 网上的URL
2 本地的绝对路径
3 本地的相对路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <!-- 当有时候我们给图片添加标题跟描述的时候，搜索引擎并不认识他们，不知道他们是相关的，
        所以我们可以把图片跟标题，描述都放进figure标签里面，这样语义化会更好一点。标题可以放进figcaption标签里
     -->
    <figure>
        <figcaption>
            <h2>长江7号</h2>
        </figcaption>
        <p>这是长江7号的描述</p>
        <a href="#">
            <img src="../img/p2097947361.jpg" alt="" usemap="movieMap">
        </a>
    </figure>
    <!-- map是地图的意思，该标签可以实现点击图片中的某个区域跳转到某个地址。map是要单独写出来的，那他怎么和图片关联起来呢？ 
        他是通过map当中的name属性 以及 img标签当中的 usemap属性进行关联的
        area 是 map的一个子元素，他表示区域的意思， 其中shape表示形状，可以是矩形rect, 圆形circle  多边形poly。
        coords是坐标
    -->
    <map name="movieMap">
        <area shape="rect" coords="3,3,268,377" href="https://baike.baidu.com/item/%E9%95%BF%E6%B1%9F7%E5%8F%B7/6978646?fr=aladdin" target="_blank" alt="">
    </map>


</body>
</html>

a标签

<a href="www.baidu.com">百度</a> ，a标签是连接标签，里面有个href属性，href属性的意思是超文本引用，里面填的值是你指向的目标地址，如果填写的是网页链接，点击a标签是会跳转到该网页地址。如果填写的是标签id，但点击a标签是会跳转到该div所显示的位置，常用于右侧固定导航点击回到顶部或者回到某个位置。a标签可以包裹任何东西。
a标签还有个target属性，可以指定是否在新标签页打开。
a标签的作用：1 超链接， 2 锚点， 3 打电话，发邮件 4协议限定符

form标签

<form action="xxxx.php" method="get/post" ></form> 是表单标签，它能够发送数据。method属性定义发送数据的方式， action属性是发送的地址。单词一个form标签没啥用，得配合其他标签使用如 <input> 输入框 <button> 按钮

         <form action="" method="GET">
        <!-- type=text是文本框  placeholder是提示信息 -->
        <!-- value属性是文本框的输入内容,即数据值，name是数据名，提交数据这两个缺一不可 -->
        <input type="text" placeholder="请输入用户名" value="" name="username">
        <!-- type=password是密码框 -->
        <input type="password" placeholder="请输入密码" value="" name="password">
        <!-- type=submit是提交的意思 -->
        <button type="submit">登录</button>
    </form>

注意：发送数据必须要有数据名跟数据值,即name 跟 value
现实效果
image.png

input标签

<input type=" "> 是输入框的意思，它根据type属性值的不同有多种展示形式

type 形式
text 文本框
password 密码框
checkbox 多选框
radio 单选框

注意：为了改善用户体验，减少操作，当使用多选框或者单选框的时候，最后给他加上默认的选项

    <form action="" method="GET">
        <h3>please choose your sex</h3>
        <!-- checked=checked表示添加默认选中 -->
        male:<input type="radio" name="sex" value="male" checked="checked">
        female: <input type="radio" name="sex" value="female">
        <button type="commit">提交</button>
    </form>

显示效果
image.png

video标签

<video></video> 是多媒体标签，他能够展示视频

<video src="test.mp4" controls autoplay muted loop></video>
属性 功能
src 视频地址
controls 是否显示按键
autoplay 是否自动播放
muted 是否静音
loop 是否循环

这些属性中，除了src属性，其他属性都是布尔值，也就是它的值是固定的，当你设置了就表示这个功能开启

注意：有些浏览器的兼容性并不是很好，有的支持mp4的视频格式，有的支持webm的格式，一般为了兼容浏览器我们可以一个视频做两种格式,，然后不在video里面写src

<video controls autoplay muted loop>
        <source src="test.mp4">
        <source src="test.webm">
</video>
//当浏览器支持哪一种格式的时候就会播放那一种

audio标签

<audio></audio> 标签的用法和video一样