HTML5 基础总结

2023-12-13 03:28:30

HTML

什么是HTML

html是超文本标记语言，全称是HyperText Markup Language,不是编程语言。

在html中不仅可以存在文字还可以写入图片，视频，超链接等非文本的东西，所以叫做超文本。标记是告诉浏览器我们的内容需要通过什么方式展示，html中标记是标签。

HTML作用

用来将我们想要展示的内容展示在浏览器当中，html就是用来编写网页（移动端的页面）的。

语法特性

  • HTML5里边部分结束标签可以省略 例如：HTML BODY li tr …
  • 单标签：不需要加结束的/ 例：input img br hr
  • 属性值可以不放在引号当中

HTML基本结构

<!DOCTYPE html> <!--告诉浏览器我们要使用什么规范！-->
<html lang="en">

<!--网页头部-->
<head>
    <!--meta 描述标签，描述网站信息-->
   <meta charset="UTF-8">  
   <!--keywords 属性说明，网站的关键字-->
   <meta name="keywords" content="">   
   <!--description 网站的描述-->
   <meta name="description" content="">    
   <!--表示链接到网站的图标，如favicon-->
   <link rel="icon" href="./images/favicon.ico" />
   <!--title标签 网页标题-->
   <title>这是我的第一个网页</title>   
   <!-- 链接到外部CSS样式表 --> 
   <link rel="stylesheet" href="styles.css"> 

</head>

<body>  <!--body表示网页主体部分-->
   hello,world;
</body>
</html>

标签

span a i img ul li div p form input textarea select option…

  1. 无确定意义的标签
    div，spn
  2. 有确定意义的标签
    1. 图片：img
    2. 输入框：input
    3. 列表标签：ul li
    4. 链接标签：a
    5. 标题标签：h1~h6
  3. h5新增的语义化标签
  • article 定义页面独立的内容区域。
  • aside 定义页面的侧边栏内容。
  • bdi 允许您设置一段文本，使其脱离其父元素的文本方向设置。
  • command 定义命令按钮，比如单选按钮、复选框或按钮
  • details 用于描述文档或文档某个部分的细节
  • dialog 定义对话框，比如提示框
  • summary 标签包含 details 元素的标题
  • figure 规定独立的流内容（图像、图表、照片、代码等等）。
  • figcaption 定义
    元素的标题 
     <figure>
         <figcaption>标题</figcaption>
         <img src="" alt="">
     </figure>
  • footer 定义 section 或 document 的页脚。
  • header 定义了文档的头部区域
  • mark 定义带有记号的文本。
  • meter 定义度量衡。仅用于已知最大和最小值的度量。
  • nav 定义导航链接的部分。
  • progress 定义任何类型的任务的进度。
  <section>
         <progress value="50" max="100"></progress>
     </section>
  • rt 定义字符（中文注音或字符）的解释或发音。
  • rp 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
  • section 定义文档中的节（section、区段）。
  • time 定义日期或时间。
  • wbr 规定在文本中的何处适合添加换行符。
  • ruby 定义 ruby 注释（中文注音或字符）。
  1. 功能性的标签
  • 视频：video
        <video src="demo.mp4" controls autoplay></video>
  • 音频：audio
        <audio src="demo.mp3" controls autoplay></audio>
  • 视频源：source
    <video>
       <source src="demo.mp4">
       <source src="demo.ogg">
   </video>
  • 画布绘制：canvas

HTML标签分类

  1. 块标签

特点：独占一行，可以直接设置宽高，在不设置宽度的情况下，默认跟随父元素的宽度；在不设置高度的情况下高度由内容撑开

  • div,p,ul,li,h1~h6,header,footer
  1. 行内标签

特点：不独占一行；不可以直接设置宽高；在不设置宽高的情况下，宽度由内容撑开

  • span,a,s,i,b
  1. 行内块标签

特点：不独占一行；可以直接设置宽高；在不设置宽高的情况下，宽度由内容撑开

  • img,input

属性

  • hidden （隐藏，类似于display:none;的效果）
<header hidden>123</header>
  • contenteditable内容可编辑
<div style="width:300px; height:300px;background:#ccc;"contenteditable="true"></div>
  • draggable是否可以拖拽
<div style="width:300px; height:300px;background:#ccc;"draggable="true"></div>
  • video audio
    • controls 播放控件
    • autoplay 是否自动播放
    • poster 封面图片

表单

form input textarea select option label

  • 控件类型：
    • text password radio checkbox file（文件域） button reset hidden（隐藏域）submit
    • H5的控件类型：email url year month week date time datetime-local tel search number range（滑块） color
  • 属性
    • form标签
      • action 表单提交的地址
      • method 提交的方式(HTTP方法 GET/POST)
      • enctype 提交内容的数据格式(form-data/urlencoded)
      • novalidate 在提交的时候不进行验证
      • autocomplete 表单自动补全/提示
      • name 名字 用来进行选择
    • 表单控件可以使用的属性：
      • type 控件类型
      • name 名字 用来进行提交
      • value 值
      • readonly 只读（只能提交不能修改）
      • disabled 禁用 (不能提交不能修改)
      • form 表示当前的控件要提交的表单是哪个(和form标签的id属性相关联的)
      • required 当前控件是必填项
      • pattern 用正则进行验证
      • autofocus 自动获得焦点
      • placeholder 默认的提示文字
      • submit中可以用到的属性：
        • formaction（跳转到其他界面）
        • formmethod
        • formenctype
        • formtarget（跳转时打开新窗口）【一套表单多种提交】
      • 数值类型（min max step）最小值 最大值 步进值 —只能用在数值里边
<!-- 举例1 -->
<form action="demo.html" novalidate autocomplete="off">
    <ul>
 <li><input type="file">
  <li><input type="hidden">
  <li><label>电子邮件：<input type="email" name="n" value="123@qq.com" readOnly></label>
  <li><label for="url">网址：</label><input type="url" name="u" id="url" >
  <li><input type="year" name="y" disabled>
  <li><input type="month" name="m">
  <li><input type="week" name="w">
  <li><input type="date" name="d">
  <li><input type="time" name="t">
  <li><input type="datetime-local" name="dt">
  <li><input type="tel" name="t">
  <li><input type="search" name="s">
  <li><input type="number" name="n" min="0" max="10" step="2">
  <li><input type="range" name="r">
  <li><input type="color" name="c">
  <li><input type="submit" value="demo.html">
  <li><input type="submit" value="百度" formaction="http://www.baidu.com" formtarget="_blank">
    </ul>
     </form>

<!-- 举例 -->
<form action="http://www.baidu.com" id="myform" target="_blank">
   </form>
   <section>
 <input type="text" name="user" form="myform" required pattern="\d{6,8} autofocus placeholder="请输入6-8个数字" >
 <input type="submit" form="myform" >
   </section>

文章来源:https://blog.csdn.net/weixin_46328739/article/details/134785280
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。