• HTML学习（标签）

    1、基础知识

    1、网页介绍

    网页：构成网站的基本元素，它通常由图片，链接，文字，声音，视频等元素组成。

    HTML：超文本标记语言。不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。

    超文本：它可以加入图片，声音，动画，多媒体等内容（超越了文本限制）。它可以从一个文件跳转到另一个文件，与世界各地主机的文件链接（超级链接文本）。

    前端人员开发代码---->浏览器显示代码（解析，渲染）---->生成最后的Web页面。

    2、浏览器

    常用的浏览器：IE（Edge）、Firefox、Chrome、Safari和Opera等。平时称为五大浏览器。

    (360浏览器，百度浏览器是国内的浏览器，在国际上使用不多)

    查看浏览器市场份额：http://tonji.baidu.com/data/browser

    浏览器内核：

    浏览器内核备注
    IETridentIE、猎豹安全、360极速、百度浏览器
    FirefoxGecko火狐浏览器内核
    SafariWebkit苹果浏览器内核
    Chrome/OperaBlinkChrome/Opera浏览器内核。Blink其实是Webkit的分支

    Chrome浏览器诞生于2008年，当时研发时，挑选了性能比较好的Webkit内核作为分支。

    目前国内一般浏览器都会采用Webkit/Blink内核，如360，UC，QQ，搜狗等。

    国内Android手机浏览器内核：如UC的U3内核，手机QQ浏览器的X5内核以及华为的T9内核均基于开源内核Webkit开发，在Webkit的基础上进行二次优化。

    4、Web标准

    Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

    标准说明
    结构结构用于对网页元素进行整理和分类，主要指HTML
    表现用于设置网页元素的板式、颜色、大小等外观样式，主要指CSS
    行为指网页模型的定义及交互的编写，主要指JavaScript

    2、HTML标签

     1、HTML语法规范

    HTML是由尖括号包围的关键词，例如<html>

    HTML标签通常是成对出现的，例如<html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。

    有些特殊的标签必须是单个标签（极少情况），例如<br/>，我们称为单标签。

    2、标签关系

    包含关系和并列关系

    1. <html>
    2. <head></head>
    3. <body></body>
    4. </html>

    3、基本机构标签

    1. <html>
    2. <head>
    3.     <title>JSPlayer</title>
    4. </head>
    5. <body>
    6.     this is body
    7. </body>
    8. </html>
    标签名定义说明
    <html></html>HTML标签页面中最大的标签，我们称为根标签
    <head></head>文档的头部在head标签中必须要设置的标签是title
    <title></title>文档的标题让页面拥有一个属于自己的网页标题
    <body></body>文档的主体页面内容基本都放到body里面

    4、开发工具

    使用VSCode：

    1、在一个空的html中输入!，选择第一个，即可自动生成html的骨架（head,body,title等）；

    2、Ctrl +放大字体；Ctrl -缩小字体

    3、插件安装

    4、<!DOCTYPE html>文档类型声明标签， 作用：告诉浏览器使用哪种HTML版本来显示网页（HTML5版本）

    5、lang语言种类：en是英文，zh-CN是中文。

    6、HTML写的中文，浏览器解析出乱码：html的编码方式需要是UTF-8格式。(UTF-8统称为万国码)

     5、常用的标签

     标签的含义：标签是用来干什么的

    1、标题标签：

    HTML提供了6个等级的网页标题，即<h1>-<h6>。h1是一级标题，h2是二级标题，h3是三级标题....

    1. <h1>标题1</h1>
    2. <h2>标题2</h2>
    • 加了标题的文字会变得加粗，字号也会依次变大。
    • 一个标题独占一行。

    2、段落标签

    1. <p> 段落1</p>
    2. <p> 段落2</p>
    • 文本在一个段落中会根据浏览器窗口的大小自动换行。
    • 段落和段落之间保留空隙。

     3、换行标签

    遇到<br/>，强制换行。

    <p> 网页数据传输只能使用http协议<br/>网页数据传输只能使用http协议</p>
    • <br/>是个单标签
    • <br/>只是另启一行显示而已，行与行之间没有间距。（段落是有间距的）

    4、 文本格式化标签

    加粗、斜体、下划线

    5、<div>和<span>标签

    <div>和<span>是没有语义的，它们就是一个盒子。布局网页。

    6、图像标签

    <img src="./764.PNG">

    src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

    属性属性值说明
    src图片路径必须属性
    alt文本替换文本，图像不能显示时，旁边的文字
    title问题提示文本。鼠标放到图像上显示的文字
    width像素设置图像的宽度
    height像素设置图像的高度
    border像素设置图像的边框粗细

    HTML的局限性：丑，只是将元素显示出来。

    3、CSS

    1、选择器{样式}

    在head标签中添加style，对HTML中的标签设置属性。

    1.     <style> 
    2.         /* 选择器{样式} */
    3.         p {
    4.             color:red;
    5.             font-size:10px;
    6.         }
    7.     </style>

    2、视频标签

    从网上把视频拔下来。

    在视频页面，打开F12，找到video标签，右键打开，在新的tab页面打开，右键保存就可以了。下面是Video标签的属性

    <video id = "video" width ="640" height="480" src="./test1.mp4" ></video>
    属性值描述
    autoplayautoplay视频自动播放，chrome需要添加muted="muted"解决此问题（默认不自动播放）
    controlscontrols像用户显示播放控件
    width/height像素宽、高
    looploop循环播放
    preload

    auto预加载

    none不预加载

    		是否预加载视频
    srcurl视频url
    mutedmuted静音播放

    3、音频<audio>标签

    <audio id = "audio" src="./test.mp3" autoplay="autoplay" ></audio>

  • 相关阅读:
    用Java来实现elasticsearch的查询，如何用log在后台打印出对应的查询语句
    willchange 优化性能的原理是什么
    基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的零售柜商品检测软件（Python+PySide6界面+训练代码）
    SMTP 协议研究
    数据结构与算法--排序算法复习
    java毕业设计下载含论文+PPT+源码等]javaweb企业财务|记账|账单管理系统设计与实现
    网络基础原理概述
    腾讯云服务器如何使用WooCommerce 应用镜像搭建电商独立网站
    鸿鹄工程项目管理系统em Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统
    LeetCode使用JavaScript破解两数之和
  • 原文地址：https://blog.csdn.net/qq_34754747/article/details/125626623