第一篇博客-小白的HTML知识点汇总(一)
这里写目录标题
- 一、什么是HTML?
- 二、HTML5的新特性:
- 三、主流web浏览器及其内核
- 四、学好html5进阶路
- 五、★声明
- 六、★html基础标签:
- 1.根标签html
- 2.头部标签head(用户看不到的)
- head标签内可填入:
- 1.★meta标签
- 2.★title标题标签
- 3.引入外部样式
- 4.引入内部样式
- 5.引入样式表
- 6.直接嵌入脚本文件
- 7.引入外部脚本文件
- 3.★body标签(用户看得到的)
- 1.定义1-6级标题
- 2.定义段落
- 3.水平线分割
- 4.空元素
- 七、HTML文本格式化
- 1.定义粗体文本
- 2.定义着重,斜体文字
- 3.定义小号字体
- 4.定义大号字体
- 5.定义加重语气
- 6.定义插入字
- 7.定义删除字
- 8.定义缩写
- 9.定义文字方向rtl和ltr
- 10.定义引用语
- 八、HTML的超链接
- 九、HTML的图像
- 十、HTML的列表
- 1.★无序列表
- 2.有序列表
- 3.自定义列表
- 十一、HTML的表格
- 十二、HTML文档区块(div/span)
- 十三、HTML文档中的表单(form)
- 1.账户密码表单:
- 2.单选:
- 3.多选:
- 4.下拉列表:
- 5.文本域及提交按钮:
- 6.HTML5新增表单输入类型:
- 7.常用的表单属性:
- 十四、HTML5的多媒体
- 1. 音频
- 2. 视频
- 3.embed标签(chrome不支持embed标签,火狐和IE均支持)
一、什么是HTML?
用来描述网页的一种语言
超文本标记语言(Hyper Text Markup Language),是一种用于创建网页的标准标记语言
html不是编程语言,是一种标记语言
包括了HTML标签及文本内容
使用标记标签来描述网页
HTML文档也叫web页面
二、HTML5的新特性:
用于绘画的canvas标签
用于媒介回放的video和audio元素
对本地储存的更好支持
新的特殊内容元素:article、footer、header、nav、section
新的表单控件:calenar、date、time、emil、url、search
浏览器的支持:Sacrifice、Chrome、Firefox、Opera、IE9
三、主流web浏览器及其内核
浏览器 | 内核 |
---|---|
IE | trident |
Google Chrome | Gecko |
Safari | Webkit ; blink |
Opera | Webkit |
Firefox | presto |
web浏览器是用于读取HTML文件,并将其作为网页显示,浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页的内容给用户
四、学好html5进阶路
HTML --> XHTML --> Css --> Css3 --> JavaScript–> JQuery --> HTML5(忘记哪里copy来的了)
五、★<!DOCTYPE>声明
有助于浏览器中正确的显示网页
不区分大小写,如
<!doctype html>
<!Doctype Html>
<!DOCTYPE html>
是HTML5的通用声明
六、★html基础标签:
HTML标记标签通常被称为HTML标签(HTML tag)
HTML标签是由尖括号包围的关键词,如
HTML标签通常是成对出现的,如
<b>
内容</b>
,其中
<b>
为开始标签(也称开放标签),</b>
为结束标签(也称闭合标签)开始标签-内容-结束标签—>组成HTML元素
1.根标签html
<html>.....</html>
是html页面的根元素
2.头部标签head(用户看不到的)
<head>.....</head>
head标签用于定义文本文档的头部,它是所有头部元素的容器
用法:head内部的元素可以引用脚本、样式表、提供元信息
head标签内可填入:
1.★meta标签
<meta charset="utf-8">
提供有关的页面信息
对于中文网页需使用utf-8声明编码,否则会乱码
360浏览器gbk为默认编码,需设置值为gbk
2.★title标题标签
<title>php中文网</title>
定义文档的标题,head部分中唯一必需的元素
3.引入外部样式
<link rel="stylesheet" type="text/css" href="style.css">
定义文档与外部资源的关系 最常见的用途是链接样式表
rel:规定当前文档与被链接文档之间的关系
type:定义被连接文档的类型
引入头部logo
4.引入内部样式
<link rel="icon" type="image/x-icon" href="2.png">
5.引入样式表
<style type="text/css">//样式表</style>
6.直接嵌入脚本文件
<script type="text/javascript">// 脚本</script>
7.引入外部脚本文件
<script type="text/javascript" src="demo.js"></script>
3.★body标签(用户看得到的)
1.定义1-6级标题
<h1>...</h1>....<h6>...</h6>
独成一段,更改字体大小,加粗
2.定义段落
<p>...</p>
把html文档分成若干段落
浏览器会自动在段落前后添加空行
注意结束标签别忘写
3.水平线分割
<hr>
展示为一条长分隔符
4.空元素
<br>
实现换行,独成一行
七、HTML文本格式化
1.定义粗体文本
<b>...</b>
粗体文本<strong>...</strong>
加重语气
2.定义着重,斜体文字
<em>...</em>
着重文字<i>...</i>
斜体文字
3.定义小号字体
<small>...</small>
如: 小号字体
4.定义大号字体
<big>...</big>
加大号字体
5.定义加重语气
<strong>...</strong>
加重语气
6.定义插入字
<ins>...</ins>
插入字
7.定义删除字
<del>...</del>
删除字
8.定义缩写
<abbr>...</abbr>
<p><abbr title="HyperText Markup Language">html</abbr>(超文本标记语言)</p>
9.定义文字方向rtl和ltr
<bdo dir="rtl">定义文字方向</bdo>
向方的字文义定<bdo dir="ltr">定义文字方向</bdo>
定义文字方向
10.定义引用语
定义短的引用语
<p><q>HyperText Markup Language</q>超文本标记语言</p>
定义长的引用语
<blockquote>...</blockquote>
八、HTML的超链接
- HTML使用标签
<a>
来设置超文本链接(超链接可以是一个字,一个词,或者一组词,也可以是一幅图像) - 作用:HTML使用超级链接与网络上的另一个文档相连,点击链接可以跳转到新的文档或者当前文档中的某个部分;
- 使用范围:几乎可以在所有的网页中找到链接
- 作为超链接,锚点(置顶),打电话,发邮件
<a href="链接地址" target="_blank">文字or词or图片or网址 </a>
href 属性描述了链接的目标
使用 target 属性以定义被链接的文档在何处显示 默认本页面 _blank:在新窗口打开文档
例如:<a href="http://www.php.cn/" target="_blank" >php中文网</a><a href="https://www.baidu.com/"><img src="data:images/1.jpg"></a>
九、HTML的图像
<img src="url" alt="" title="这是图片"
url :指填入图像的位置(可以是本地地址,也可以是网络上地址)
alt属性用来为定义图像添加备注信息(如果图像丢失不显示,就会显示alt内内容)
title作为图片提示符
十、HTML的列表
1.★无序列表
<ul><li>苹果</li><li>苹果</li>
</ul>
- 苹果
- 苹果
2.有序列表
<ol type="Ⅰ/i/1/a/A" start=""><li>梨子</li><li>梨子</li>
</ol>
type 定义类型罗马数字Ⅰ/i,A/a,1
罗马数字Ⅰ目前无法显示!!!
start表示从几开始,用1234表示即可
<ol type="i" start=3><li>梨子</li><li>梨子</li>
</ol>
3.自定义列表
<dl><dt>梨子</dt><dd>生津止渴</dd><dt>苹果</dt><dd>好吃</dd>
</dl>
- 梨子
- 生津止渴
- 苹果
- 好吃
十一、HTML的表格
表格由
<table>
标签来定义表格内的行由
<tr>
标签来定义表格内的列由
<td>
标签来定义表格表头由
<th>
标签来定义表格标题由
<caption>
标签来定义
<table border="1"><tr><td>这是一个一行一列的表格</td></tr></table>
这是一个一行一列的表格 |
其中 border 来定义边框
<table border="1"><tr><td>这是一个二行一列的表格</td></tr><tr><td>这是一个二行一列的表格</td></tr>
</table>
这是一个二行一列的表格 |
这是一个二行一列的表格 |
<table border="1"><tr><td>这是一个一行多列的表格</td><td>这是一个一行多列的表格</td><td>这是一个一行多列的表格</td><td>这是一个一行多列的表格</td></tr></table>
这是一个一行多列的表格 | 这是一个一行多列的表格 | 这是一个一行多列的表格 | 这是一个一行多列的表格 |
<table border="1"><caption>表格的标题</caption><tr><th>这是表头</th><th>这是表头</th><th>这是表头</th><th>这是表头</th></tr><tr><td>这是一个一行多列的表格</td><td>这是一个一行多列的表格</td><td>这是一个一行多列的表格</td><td>这是一个一行多列的表格</td></tr></table>
这是表头 | 这是表头 | 这是表头 | 这是表头 |
---|---|---|---|
这是一个一行多列的表格 | 这是一个一行多列的表格 | 这是一个一行多列的表格 | 这是一个一行多列的表格 |
caption 用来定义表格标题
th来定义表格表头
十二、HTML文档区块(div/span)
(div和span)作为容器,使分块明确,结构化,绑定操作
大多数 HTML 元素被定义为块级元素或内联元素
- 块级元素在浏览器显示时,通常会以新行来开始和结束(div),每个
<div>
标签独占一行 - 内联元素在显示时通常不会以新行开始(span),
<span>
标签不会独占一行
- 块级元素在浏览器显示时,通常会以新行来开始和结束(div),每个
div:定义了文档的区域,块级元素
span:用来组合文档中的行内元素div和span标签可以组合使用
html中文网 html中文网 html中文网
十三、HTML文档中的表单(form)
作用:表单用于收集不同类型的用户输入
<form></form>
表单是一个包含表单元素的区域<input>
元素: 最重要的表单元素,该元素根据不同的 type 属性,可以变化为多种形态text–>定义常规文本输入(常用:搜索框/用户名及密码)
password–>定义密码字段输入
submit–>定义提交按钮(提交表单,有刷新效果)
radio–>定义单选
checkbox–>定义多选
select>option–>定义下拉列表
textarea–>定义文本域
button–>定义按钮(有刷新效果/无刷新效果)
<form action="url" method="GET/POST"></form>
action:定义在提交表单时执行的动作
method:规定在提交表单时所用的 HTTP 方法(GET 或 POST)
GET : 适合少量数据的提交,并且没有敏感信息
POST: 安全 对数据长度没有要求
1.账户密码表单:
<form action="url" method="post">用户:<input type="text" value="goodlzyc">密码:<input type="password" value=""><input type="submit" name="submit"><!--有刷新效果--></form>
value 属性 定义字段的初始值
2.单选:
<form>单选:<input type="radio" name="sex" value="male">男<input type="radio" name="sex" value="female">女
</form>
3.多选:
<form>双选:<input type="checkbox" name="subject" value="math">数学<input type="checkbox" name="subject" value="english">英语</form>
4.下拉列表:
<select> <option>江苏</option><option>合肥</option><option>河北</option><option>山东</option></select>
5.文本域及提交按钮:
<form><textarea></textarea><button>发布</button><!--有刷新效果--><input type="button" value="发布">
</form>
无刷新效果
6.HTML5新增表单输入类型:
- 输入购买件数:
<input type="number" name="">
- 输入出生日期(年月日):
<input type="date" name="">
- 输入年月:
<`input type="month" name="">`
- 输入邮件地址:
<input type="email" name="">
- 搜索:
<input type="search" name="">
- 滑块条:
<input type="range" name="">
- 等等,更多自己去查
7.常用的表单属性:
1.姓名:<input type="text" name="" value="feir">
value 属性规定输入字段的初始值
2.姓名:<input type="text" name="" value="feir" readonly>
readonly 属性规定输入字段为只读(不能修改
3.姓名:<input type="text" name="" value="feir" disabled>
disabled 属性规定输入字段是禁用的
姓名:<input type="text" name="" value="feir" size="45">
size 属性规定输入字段的尺寸 以字符计算的长度
5.姓名:<input type="text" name="" value="feir" autofocus>
autofocus当页面加载时 元素应该自动获得焦点
6.<input type="text" name="" placeholder="请输入你的姓名">
placeholder 属性规定用以描述输入字段预期值的提示
<input type="text" name="" placeholder="允许输入的最大长度" maxlength="3">
maxlength 属性规定输入字段允许的最大长度
<input type="number" name="" placeholder="允许输入的最大值" max="3"><input type="number" name="" placeholder="允许输入的最小值" min="3">
min 和 max 属性规定 元素的最小值和最大值
<input type="text" name="" required placeholder="请输入用户名"><input type="submit" name="">
required规定在提交表单之前必须填写输入字段,不填入会有警告提示
十四、HTML5的多媒体
1. 音频
标签定义声音,比如音乐或其他音频流。
- 标签为媒体元素定义媒体资源
control 属性供添加播放、暂停和音量控件
loop每当音频结束时重新开始播放
不支持audio元素的浏览器会显示”您的浏览器不支持audio元素“文字
<audio controls loop><source src="音乐/华晨宇 - 亲爱的小孩 (Live).mp3" type="audio/mp3">您的浏览器不支持 audio 元素 </audio>
2. 视频
<video>
标签定义视频,比如电影片段或其他视频流<source>
标签为媒体元素定义媒体资源control 属性供添加播放、暂停和音量控件
loop每当音频结束时重新开始播放
不支持video标签的浏览器会显示”您的浏览器不支持video标签“文字
width和height设置视频的宽高
<video controls loop ><source src="音乐/Exo - 3.6.5.mkv" type="video/mp4" width="404" height="720">您的浏览器不支持Video标签</video>
???IE浏览器播放video无声音
3.embed标签(chrome不支持embed标签,火狐和IE均支持)
标签定义了一个容器 用于嵌入的内容,比如插件;(图片\视频\音频)
<embed src="学习/QQ截图20200527213019.png" height="350px" width="650px" />
chrom显示图片,IE不显示图片
<embed src="音乐/Exo - 3.6.5.mkv" type="video.mp4" height="550px" width="650px">
chrom支持插件,IE播放时视频但无声音
<embed src="音乐/EXO - 初雪.mp3" type="audio/mp3">
chrom,IE浏览器支持音乐播放
第一篇博客-小白的HTML知识点汇总(一)相关推荐
- Python 用pygame 做一个游戏的开始界面(小白第一篇博客)
Python 用pygame 做一个游戏的开始界面(小白第一篇博客) 主要功能实现 本篇文章主要是实现了一个游戏开始界面的两个功能: 1,将鼠标放到"开始游戏"或"结束游 ...
- 蒟蒻的第一篇博客CF1041C Coffee Break(二分+贪心+set)
CF1041C Coffee Break(二分+贪心+set) 描述 Recently Monocarp got a job. His working day lasts exactly mm min ...
- 第一篇博客,用以规划我的编程人生
本人编程小白.第一次写技术博客,希望制定一个学习计划,让自己慢慢成长为一名优秀的程序猿. 学习方向是成为一名全栈工程师. 前端方面:会用bootstrap设计网页,会用jQuery完成动作. 后端方面 ...
- Carrey的第一篇博客
Carrey的第一篇博客 为什么要写这篇博客 回顾一下猿生 总结一下 为什么要写这篇博客 你好! 我是Carrey,这是我的第一篇博客.我是一个有将近三年工作经验的java后端程序员,今天写这篇博客绝 ...
- 第一篇博客------自我介绍
目录 自我介绍 编程目标 如何编程 希望进入的公司 自我介绍: Hello!!!我是一名即将步入大二的计算机小白. 小白 姓名:###(三个字) 性别:男 年龄:大二(大概也就0--100 ...
- Healer的第一篇博客
1.自我介绍 Healer是来自双非一本弱校的小白一枚,说不上对编程感兴趣但也绝对不会排斥编程.但是既然选择了计算机专业,那呆瓜就有信心就要搞好它,只要坚持下去,Healer一定可以从小白变成大牛! ...
- 第一篇博客——C语言实现简单的学生成绩管理系统
C语言简单实现学生成绩管理系统 一.前言 首先,要写一个管理系统必须要先搭出一个框架来,即明确自己要实现哪些功能,将每个功能都写陈一个函数,然后再去编写实现各个功能的函数,最后再思考各个函数之间的相互 ...
- 2017年终总结——第一篇博客开端
2017的总结: 2017年过去了,真的好快,可以清晰的记得我去年除夕的晚上我干了啥.但是2017年也是我改变比较大的一年,何出此言呢,总结了几点: 1.变的更加稳重成熟了,这种感觉的由来,其实是有时 ...
- 【我的第一篇博客】——上个月学习总结(4月)
大家好,我是monitor_sun 目录 前言 学习月总结 1.复盘上个月(4月)的学习成果 2.在本月/季度的学习过程中遇到的难题有哪些,是如何解决的,从中学到了什么? 3.有什么事情是自己一直想做 ...
最新文章
- 元学习(meta learning) 最新进展综述论文,28页pdf
- 实用 | PyCharm常用快捷键整理
- 生成有时间限制的二维码_微信公众号渠道二维码怎么制作?监测渠道效果的利器来了...
- 【bzoj2326】[HNOI2011]数学作业 矩阵乘法
- rabbitmq php 自动断开,解决RabbitMQ服务启动自动关闭,访问不了问题
- python 添加数据库表_通过时间表(Python库)简化复杂的计划
- 软件制胜之道精彩观点聚合
- MyBatis之使用XML配置SQL映射(一)
- vscode调试cpp环境,手动安装vsix
- android自定义控件不显示,解决Android Studio Design界面不显示layout控件的问题
- 【JAVA】Java 内存模型中的 happen-before
- android 开源 高斯模糊_Android高斯模糊你所不知道的坑
- 微信小程序Taro + React开发实践
- Python自然语言处理实战(1):NLP基础
- 手写JavaScript
- HTML下拉菜单怎么做成横向,JQuery实现绚丽的横向下拉菜单
- 西南大学844信号与系统考研经验(高分上岸学姐)
- MATLAB中resample函数使用
- RTL是什么,Verilog的语法能不能看我的这一篇大致知道。
- 查询海康、大华RTSP协议