HTML5基础知识笔记（更新）
2024-05-25 00:36:04
一 HTML
通常意义的h5是一个技术总称，约等于html5+css3+js
1.1 含义
1.2 基本骨架
<html>
<head>
<title></title>
</head>
<body>
网页要显示的内容
</body>
</html>
html5基本骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> DTD 文档类型说明
<meta charset="UTF-8"> 字符集设置 UTF-8是支持绝大数语言
假如大家用sublime,快捷方式html:5 按住tab或ctrl+E
1.3 编辑器
记事本 sublime vscode(IDE) Hbuilder webstorm ...
1.4 常用标签
标题标签 h1~h6 双标签 <h1></h1> 开始标签和结束标签
Q： 请谈谈你对标题标签的理解？
从语义的角度回答 标题标签给文本赋予标题的含义
SEO搜索引擎优化
结构化的语言标记要看结构。
划线标签 <hr /> 单标签 了解 线条以后用css完成
段落标签 <p></p> 双标记
换行标签 <br /> 单标签
div和span标签 无语义的标签 实在找不到标签表示的时候 考虑用div和span
span可以放文字、图片、表单
div可以自我内部嵌套，span内部不能嵌套div
pre标签保留原文本格式
<!--注释
1 标签可以拥有多个属性 属性不分前后顺序 属性之间用空格隔开
2 标签属性语法 <标签名 属性1="属性1值" 属性2="属性2值" />
3 任何标签的属性值都有默认值 省略属性则取这些默认值
-->
图像标签 <img /> 单标签（图片出问题时，使用alt显示提示。还可以内嵌title，鼠标放上去显示。还可以width，high最好等比例。还有边框border,默认黑，像素设置粗细）
超链接 <a href="地址"> 超链接名字(后面加路径，#等于原页面，路径后加target=“_blank”打开新页面，中间路径也可以用图像标签) </a> 应用：还可以做锚点
锚点
<a href="#值">文字</a>
需要跳转到的地方打一个标记 <a name="值"></a>或<h2 id="值">文字</h2>，标记可以不用文字，还是用标题表示
跨页面锚点
在#前加包含跳转地点的网页地址，带后缀的全称
base标签 单标记 设置在head中 作用 让页面所有的超链接可以在新窗口打开
＜base target=＂_blank＂ /＞
实体符号
＜用<
＞用>
&用&
因为有空白折叠机制， 为1个空格
注释
路径 绝对路径和相对路径
绝对路径 F:\训练营\day3 带有盘符的路径
相对路径 说明有个参照物
情况一
day3文件夹下面
01.html 1.jpg
01.html中 <img src="1.jpg" />
情况二
前端文件夹 > day3文件夹 > 01.html
1.jpg <img src="../1.jpg" />
./当前目录
../上一级
/下一级
列表
1 无序列表
<ul>
<li>1</li>
<li>2</li>
</ul>
2 有序列表
<ol>
<li></li>
</ol>
3 自定义列表
<dl>
<dt></dt> 列表标题
<dd></dd> 列表描述，dd是描述dt的，多对1关系
</dl>
表格
在出现CSS前，老式布局是表格加div
caption表格标题，此为表格自带标签
tr表示增加行
td表示增加列(可加 rowspan 横跨行数，被横跨行需要删除对应。可加colspan 横跨列数，也需要删除自己对应的多列)
th表示表头，加黑居中，可包裹在thead标签中(与之对应有tbody，如果没有thead，一般浏览器会默认添加tbody,tbody会均分高度与宽度，thead不会，tfoot在body后面，存一些统计信息)
cellspacing单元格之间间距
border边框粗细
align是让整个表格居中
表单
input type
text 文本框
password 密码
radio 选项（加name值，可以同值唯一，达到互斥）
checkbox 复选项
button 按钮（value赋文字）
submit 提交按钮，数据发到后台
reset 重置，刷新，用form（双标签）全部包裹需要重置的部分
file 文件上传
image src路径
textarea 文本域
datalist
option 数据列表选项参考，双，可以与上面的input相关联而提示，给datalist一个id，用input的list去标记id，可以有联想和参考提示功能
fieldset分组功能，会包裹信息，自动边框
legend表示表单的主题
select
option选项，第一个为默认显示
from
action = "服务器地址
method = 提交方式
name = 区分表单
label标签的使用（双标签）
可以包裹text使文字部分也可提示显示输入框（多个text就不可以了，把label后加for，获取需要的text的id就可以定向跳转，获取光标）
第一行 文档类型声明 DTD 有很多种
xhtml 严格版html 3种版本
html4 3种版本
html5 语法松散不严谨
strict严格 transitional过渡 frameset框架
html5在html的变化
增加了很多语义化标签
header定义网页的头部或页眉
nav定义导航栏
footer定义页面的底部 页脚
article定义文章
section定义某个具有主题的区域
aside定义侧边栏
html5在表单中的变化
表单元素都可以用form包裹起来
input type
email移动端提示@
tel移动端提示9宫格
number带数字加减
url移动端带.com
search移动端放大镜
range一个可移动滑块
f time带数字加减选择
date年月日，带日历点击选择
month月份
week星期和第几周
color颜色，前面颜色全面面板，但默认左上角显示
html5新增表单属性
input type = text placeholder = 提示信息，点击即消除
autofocus页面加载时，自动获取焦点，光标闪烁
file文件上传，加multiple可以同时选择多个文件上传
text文本，加autocomplete = on 增加一个历史记录，并且根据字段进行提示，要用form包裹可用。加required检测非空才可提交。accesskey = "一个名字"，键盘alt+名字可以激活焦点
多媒体标签
embed 标签可定义嵌入的内容，可以用来插入各种多媒体，格式可以是Midi、Wav、AIFF、MP3等等
embed src = 路径源 width = heigh = align="middle"居中 allowFullScreen = ＂true"
html5有替代标签
audio（双）
src = 路径 controls控制显示 autoplay自动放 loop=-1循环
controls autoplay
source src = （audio中加上面）
您的浏览器不支持
video
src = 路径 controls autoplay
source src = （video中加上面）
你的浏览器不支持视频播放
转载于:https://www.cnblogs.com/STK0210/p/10265434.html
HTML5基础知识笔记（更新）相关推荐
- Html5基础知识笔记
学习笔记,供个人快速查阅使用!! 公开分享,不喜勿喷! Html5基础介绍 h1标签 <h1>Hello World</h1> p标签 如果想在网页上显示文章,这时就需要< ...
- Java基础知识笔记-11_2-Swing用户界面组件
Java基础知识笔记-11_2-Swing用户界面组件 这章教程两个版本,一个语法是非lambda表达式版本,另一个是lambda表达式版本 非lambda表达式版本 1 Java Swing概述 J ...
- python详细基础知识笔记
详细基础知识笔记 注: ·第一章 学习准备 1.1高级语言.机器语言.汇编语言 1.2 汇编.解释 1.3 静态语言.脚本语言 1.4 Python的历史 1.5 Python语言的优点.缺点 1.6 ...
- HTML基础知识笔记（0基础入门）
HTML&CSS基础知识笔记 HTML 一.HTML介绍 二.实体 三.meta标签 四.语义化标签(一) 五.语义化标签(二) 六.语义化标签(三) 七.列表 八.超链接 九.图片标签 十. ...
- html5基础知识文档,HTML5基础知识（1）
原标题:HTML5基础知识(1) html5是万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力, ...
- access2013数据库实验笔记_医学科研实验基础知识笔记（十）：甲基化
往期回顾 医学科研实验基础知识笔记(一):细胞增殖 医学科研实验基础知识笔记(二):细胞凋亡检测 医学科研实验基础知识笔记(三):细胞周期检测 医学科研实验基础知识笔记(四):细胞自噬研究策略 医学科 ...
- HTML5 基础知识
HTML5 基础知识 什么是 HTML? HTML 是一种超文本标记语言,"超文本"就是指页面内可以包含图片.链接.深职音乐.视频.程序等非文字元素 HTML 不是一种编程语言 H ...
- 6-DoF问题相关基础知识笔记
6-DoF问题相关基础知识笔记 一.什么是6-DoF,即6个自由度是什么? 二.PnP算法 三.BOP挑战与官方数据集简介 BOP数据集 BOP toolkit BOP挑战的介绍页面 四.相关论文 C ...
- 二代测序之SNV基础知识笔记总结
二代测序之SNV基础知识笔记总结 文章目录 二代测序之SNV基础知识笔记总结 SNV基础知识 SNVs Mutation vs. Variant[变异和突变] 不同层次的突变 DNA: 1.编码DNA ...
最新文章
- IT人员健康信号之鼻炎养护
- 传智C++课程笔记-1
- document.createDocumentFragment 以及创建节点速度比较
- asterisk 扩展应用(3)——IVR 实现
- python post json 解析失败_python中json对象转换出错解决方法
- redis-python操作redis
- structs2 get方式传参中文乱码解决方法
- subversion mysql_MySQL数据库之httpd+mysql+php+subversion
- python vimIDE环境
- [转]提高PR值的具体方法
- 集成学习01_xgboost参数讲解与实战
- c++使用完成端口实现服务器的高性能并发
- 怎么把手机字体改成繁体_手机变成繁体字怎么改回来
- 你觉得最好用的地图导航软件是哪一个?这3款App供你选择
- raid5是计算机的什么知识,关于raid5的知识
- 计算机中什么符号代表除号,电脑怎么打除号?word除号怎么打出来?键盘上÷号是哪个键?除以符号电脑怎么打?...
- EMU8086使用及8086指令系统（微机原理实验）
- [开源]Qt图片调整之饱和度调节
- shelljs库使用js达到linux命令操作
- Unity 3.Adventure Game tutorial（事件系统、动画状态机、库存、条件、反应、交互、游戏状态）