• HTML5 基础

    一、HTML 简介

    Hyper Text Markup Language 超文本标记语言

    二、HTML 网页结构

    html 标签里，head标签、body 标签

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>标题title>
	head>
    
	<body>
		
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    搜索引擎也放在 head 标签，style 也可以放在 head

    三、标签的种类

    1、标题标签

    （h1~h6）

    标题标签

    2、段落标签

    • （

      文档流块级元素之一，自动换行。 不换行）
    • （壹 贰，两个如果写在一行，“壹贰”之间没有空格）

    3、换行标签、水平线标签

    （
    ）、水平线标签（

    ）

    • （最好记得加 /）

    4、字体样式标签

    ，，…… （还有比如说下划线，等）

    • 字体样式标签
      • 加粗：...
      • 斜体：...

    4.1、注释与特殊符号

    特殊符号字符实体示例
    空格 百度` 
    大于号(>)>如果时间>晚上6点，就坐车回家
    小于号(<)<如果时间<早上7点，就走路去上学
    引号(")"W3C规范中，HTML的属性值必须用成对的"引起来
    版权符号@©© 2008-2018课工场

    5、图像标签

    常见的图像格式
    JPG
    GIF
    PNG
    BMP

    image-20220811222951323

    内联标签 —— 行内元素。块级元素：换行，行内元素：不换行

    6、链接标签

    image-20220811223434778

    _blank

    • 新窗口打开

    _self

    • 同窗口打开

    6.1、网页链接

    href=“页面”

    <a href="www.baidu.com"> 百度 a>
<a href="index.html"> 首页 a>

    • 1
    • 2

    6.2、锚链接

    a 标签，链接属性的值为 “网页文件名#锚名”

    如果锚链接成功，会跳到 id 或 name 值为 锚名的，另一 a 标签 的位置

    <a href="#锚名 1">点这里到内容 1a>
<a href="#锚名 2">点这里到内容 2a>
<a href="页面网页文件名#锚名 3">点这里到内容 3a> 
（ 到某个网页的 “锚名 3” ）
……
<a name="锚名 1">内容 1a>
……
<a id="锚名 2">内容 2a>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    6.3、功能链接

    特别功能的链接，比如说 mailto

    <a href="mailto:邮箱地址">……a>   

    • 1

    四、列表

    ol，ul，dl

    1、有序列表

    li 自动生成序号：ol，li

    <ol>
	<li> …… li>
	<li> …… li>
	<li> …… li>
ol>

    • 1
    • 2
    • 3
    • 4
    • 5

    2、无序列表

    li 默认实心圆点：ul，li

    <ul>
	<li> …… li>
	<li> …… li>
	<li> …… li>
ul>

    • 1
    • 2
    • 3
    • 4
    • 5

    3、自定义列表

    标题dt，后面内容dd 缩进。dl，dt，dd

    五、表格

    table 头尾标签之间， tr 是一行。tr 之间，th 是标题列， td 是普通的列

    表格相关组成 :（tr 是一行。tr 里，th 是标题列， td 是普通列）

    image-20220811224748189

    1、表格相关属性

    （td 与 th 跨行跨列、水平垂直对齐，table 宽高边距，…）

    td 或 th 的：

    rowspan="3" 		
colspan="2" 		

align="center" 		
valign="middle" 	

    • 1
    • 2
    • 3
    • 4
    • 5

    table 的：

    width="……" 			
height="……" 		
border="……" 		

cellpadding="……" 	
cellspacing="……" 	

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    HTML基础知识点总结 .doc
    doc 0星 超过10%的资源 50KB
    下载

    六、表单

    ……

    image-20220811225251142

    如果用 ，可以 名字 ，
    如果 里有 id=“某 id 名”，点 ”名字“，可以进入到打字模式。

    注意：

    action=“#” 本地

    1、input 的元素类型

    type 属性：

    image-20220812082805414

    • 单选按钮，是圆点。复选按钮，是方框打勾。
    • 如果想复选按钮不重复，几个的 name 同一个名字就行
    • image 类型，在form标签里有提交功能
    • hidden 类型，隐藏不显示
    • email 类型，类似 text 类型，需要是邮箱的格式。HTML5 新增

    select：

    • select 是作为标签使用，而不是 input 标签 的 type 元素 的值
    <form method="get" action="#">
    <p>
        
        <label for="email">邮箱地址<span>*span>label>
        <input type="email" name="email" id="email" />
    p>
    <p>
        <label for="pwd">密码<span>*span>label>
        <input type="password" name="pwd" id="pwd" />
    p>
    <p>
        <label for="surePwd">确认密码<span>*span>label>
        <input type="password" name="surePwd" id="surePwd" />
    p>
form>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    image-20220812084030752

    select 标签：

    select 标签之间，option

    <p style="text-indent: 2em;">
    <label> 类型：label>
    <select name="select">
        <option value="1">1option>
        <option value="2">2option>
        <option value="3">3option>
        <option value="4">4option>
    select>
p>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    2、input 的其他属性

    • name （提交的 “变量名”）
    • value （提交的 “值”）
    • readonly （只读）
    • disable （禁用）

    表单验证：

    • placehoder （录入内容以前，框内的提示）
    • required （必填）
    • pattern（格式要求）

    image-20220812084421305

    placeholder：

    image-20220812084514254

    required：

    image-20220812084537187

    pattern：

    验证之一的属性（正则表达式）

    • 方括号：选择，元字符：\d 单个数字，量词：{x,y} ，| 或者。

    （^ 匹配开始位， $ 匹配结束位，但是一定要有吗？）

    • 如果加了^表达式，表示一定要以此为开始才能匹配到，那么同理，$表达式一定要以此为结尾才能匹配到
    千锋html5线下培训html5笔记1~14天内容
    doc 0星 超过10%的资源 46.49MB
    下载

    （验证手机号：pattern=" ^1[3578] \ d{9} "，^ 必要吗？）

    • 一定是要这个格式的
     <label for="mingzi">手机号码<span>*span>label>
 <input type="text" required="required" pattern="1[3578]\d{9}" name="name"/>
 

    • 1
    • 2
    • 3

    3、文本域

    textarea 标签：

    <tr>
	<td>文本域td>
	<td><textarea cols="40" rows="6">textarea>td>
tr>

    • 1
    • 2
    • 3
    • 4

    七、HTML5 新增

    1、简介：

    • 新的语义化标签
    • 新的表单控件
    • 用于绘画的 canvas 元素（标签）
    • 用于媒介回放的 video 和audio 元素

    2、新增结构元素：

    HTML5新增结构元素：

    image-20220812085348597

    3、新增音频、视频、绘画、等元素

    image-20220812085431716

    • datalist 与 option 一起用，嵌套与 select 一样
    • datalist 与 select 不同：option 标签 之间不需要写内容，有 value 就行

    音频播放：

    image-20220812085530945

    • 视频 video，也有这些属性

    source 标签：

    <video width="400px" height="250px" autoplay="autoplay" controls="controls">
	<source src="files/video1.mp4" type="video/mp4">source>
	<source src="files/video1.ogg" type="video/ogg">source>
	
< /video>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 从上往下加载，第一个加载不了，就加载第二个

    4、新增表单元素：

    email、url、color、search、range ……

    HTML5新增input类型：

    image-20220812085821307

    lay="autoplay" controls="controls">
	<source src="files/video1.mp4" type="video/mp4">source>
	<source src="files/video1.ogg" type="video/ogg">source>
	
< /video>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 从上往下加载，第一个加载不了，就加载第二个

    4、新增表单元素：

    email、url、color、search、range ……

    HTML5新增input类型：

    image-20220812085821307

  • 相关阅读:
    Java 性能基准测试：从 OpenJDK 8 到 OpenJDK 19
    找出一个数组中未出现的数Java
    F. Quests Codeforces Round #835 (Div. 4)（二分答案）
    js Fetch返回数据res.json()报错问题
    机器人操作系统ROS2学习—控制小海龟运动
    for break实现代码验证练习题韩顺平
    Windows开启linux子系统并迁移到非系统盘
    MySQL高级篇知识点——索引优化与查询优化
    springboot使用redis实现消息队列功能，redis使用list和stream实现消息队列功能，redis实现消息队列的风险点分析
    CSDN编程竞赛-第六期（下）
  • 原文地址：https://blog.csdn.net/kitty_Happy/article/details/126297295