html元素基本使用

前言

大家好，我是jiantaoyab，第一次学习前端的html，写一篇笔记总结常用的元素

语义化

例如只要是
不管字体的大小是怎么样，有没有加粗都是标题，元素显示到页面中的效果应该由css决定，这就是语义化。

文本元素

元素周期表大家可以查看这个，查看每个元素怎么使用，或者用官网查询。

<!-- head中的内容不会显示到网页上 -->
<!-- meta 附加属性 -->
<head>
    <!-- 指定网页内容编码是UTF-8 -->
    <meta charset="UTF-8">
    <!-- 适配手机端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页标题 -->
    <title>Document</title>
    
</head>

span

html 复制代码

span 无意义， 仅仅用来设置样式
某些元素显示的时候会占一行（块级元素）
某些不元素不会（行级元素）
到了HTML5已近弃用这种税法

pre

html 复制代码

在源代码中连续出现的空格，会出现折叠成一个空格在网页中
但是在pre元素的内容会按照原样出现在网页中
该元素通常用来显示代码，它有一个默认的css属性

实体字符

html 复制代码

实体字符 Entity
通常用来显示页面特殊符号
&单词 比如小写字符 &lt &gt（大写） &nbsp 空格符号 &copy 版权符号
&#数字 &#60 小写字符

a元素

html 复制代码

1.跳转地址
2.跳转锚点#（跳转到同一个网页中某个位置） 
3.功能链接 点击后会触发js代码
 	<!-- 1.跳转地址 -->
    <a href="https://lestore.lenovo.com/">联想电脑管家</a>
    <!-- 2.跳转锚点 -->
    <a href="#chapter2">章节2</a>
    <h2 id="chapter2">跳转的锚点</h2>
    <!-- 3.功能链接发送邮件 -->
    <a href="mailto:dawdwawda@yeah.net">邮件</a>
    <!-- 4.拨打电话 -->
    <a href="tel:312321321321di">电话</a>

 <!-- 和map联用 
        coords 坐标原点是从左上角开始的
        circle 圆要找出圆心 "长，宽，圆的半径"
        rect   矩形要找出左上角和右下角 "x1,y1, x2,y2"
        poly   多边形（三角形，五边形什么都行）"x1,y1,x2,y2,xn,yn"
     -->
    <map name="com"> 
        <area shape="circle" coords="137,197,30" href="https://www.bilibili.com/" >
    </map>


  <!-- 和figure联用 -->
    <figure>
           ->
        <a target = "_blank" href="https://lestore.lenovo.com/search?">
        <img usemap="#com" src="hh.jpg" alt="这是图片">
        下载</a>
        <map name="com"> 
        <area shape="circle" coords="137,197,30" href="https://www.bilibili.com/" >
        </map>
    </figure>

target

html 复制代码

跳转窗口的位置
 _self 当前窗口打开默认值
_blank 在新窗口打开
title:鼠标放到这里的话会有一个详细描述
  <!-- target使用 -->
    <a href="https://lestore.lenovo.com/" target = "_blank"  title ="软件下载">联想</a>

URL

html 复制代码

 访问站位资源得用决定路径
当跳转的目标和当前页面的协议相同时，可以省略协议
绝对路径的书写格式
url地址 = 协议名：// 主机名：端口号 / 路径

相对路径
访问站内资源
以 ./ 开头  ./表示当前资源所在的目录
..表示上一级目录
   <!-- 相对路径 -->
    <a href="./second.html">第二页面</a>

图片元素

html 复制代码

img 空元素
src资源的路径，alt描述图片内容
1.和a元素联用
2.和map元素联用
coords 坐标原点是从左上角开始的
circle 圆要找出圆心 "长，宽，圆的半径"
rect   矩形要找出左上角和右下角 "x1,y1, x2,y2"
poly   多边形（三角形，五边形什么都行）"x1,y1,x2,y2,xn,yn"
衡量坐标的时候用专业软件量才准确
3.figure联用
把图片，图片标题，描述包裹起来

 <!-- 图片 -->
 <img src="https://img2.baidu.co20&f=JPEG?" alt="这是图片">
<!-- 和a元素联用 -->
    <a target = "_blank" href="https://lestore.lenovo.com/search?">
        <img usemap="#com" src="ff.jpg" alt="这是图片">
    下载</a>

video视频&& audio 音频

html 复制代码

video视频
controls = "controls" 只能这样用这种叫bool属性
和controls 是一样的，不用写等于后面的也可以
下面都是bool属性
autoplay 自动播放
muted 禁音播放
loop 循环播放

audio 音频 和视频的使用一样
如果网站不兼容的话，用source带上多个格式

 <!-- 视频 -->
    <video src="//www.bilibili.com/bangumi/media/md28229590">
        视频
        <!-- 用这个方式支持多种播放模式 -->
        <source src ="xxxx/xx.mp4">
        <source src ="xxxx/xx.webm">
    </video>

列表

html 复制代码

ol ：是一个列表
li ：有序列表
<ol reversed> 倒着显示
一般不用type属性，用css来设置前面的序号
type = "i" 罗马数字排列
type = "A" 字母排列排列

ul ：无序列表
常用来制作菜单 和 新闻列表
    
定义列表
dl ： definition list 
dt ： definition title
dd ： definition description
    
	<!-- 有序列表 -->
     <ol reversed>
        <li> 大娃大娃</li>
        <li> 大娃大娃</li>
        <li> 大娃大娃</li>
     </ol>
     <!-- 无序列表 -->
     <ul>
        <li> 无穷大青蛙单位</li>
        <li> 无穷大青蛙单位</li>
        <li> 无穷大青蛙单位</li>
        <li> 无穷大青蛙单位</li>
     </ul>

     <!-- 定义列表 -->
        <dl>
            <dt>HTML</dt>
            <dd>
                超文本语言
            </dd>
        </dl>

容器元素

html 复制代码

该元素代表一个区域，内部放置其他元素
div 没有语义 显示效果靠css设计
header 表示页头，也可以表示文章头部
footer 表示页脚，也可以表示文章尾部
article 通常用于表示整片文章
section 通常用于表示文章的章节
aside 通常用于显示侧边栏

元素包含关系

html 复制代码

元素的包含关系由元素的内容类别决定
假如想要查 h1 元素能不能包含 P 元素 用mdn查 

1.容器元素中可以包含任何元素
2.a元素中几乎可以包含任何元素
3.某些元素可以可以有固定的子元素 ul和li

html元素基本使用

前言

语义化

文本元素

标签