Web开发|Web开发 | HTML 介绍 & 使用总结 (一)
HTML介绍
HTML 指的是超文本标记语言 (Hyper Text Markup Language), HTML 不是一种编程语言，而是一种标记语言 (markup language) , 标记语言是一套标记标签 (markup tag), HTML 使用标记标签来描述网页的
HTML标签
以下是HTML常用的标签介绍以及使用方式:
- HTML文档声明，告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析识别HTML文档
- 必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题
- HTML5的文档声明比HTML 4.01、XHTML 1.0简洁非常多
.....- html元素是HTML文档的根元素，一个文档中只能有一个，其他所有元素都是它的后代元素
// lang属性，作用是 1.帮助语音合成工具确定要使用的发音 2.帮助翻译工具确定要使用的翻译规则- title 网页的标题
- meta 可以用于设置网页的字符编码
- style 文档样式,css样式
- link 链接外部样式
- base 设置一些基础信息
- script
title - 锐客网
网页title - 锐客网
标题段落
加粗
- h元素有助于网站的
SEO（Search Engine Optimization）优化，可以促进关键词排名 - 建议在网页中最多只有1个h1元素
- 乱用h元素不仅不会给网站带来好的权重，同时也有可能被搜索引擎认为作弊，最后导致K站
一级标题
我是段落
加粗字体
加粗字体
斜体字体
斜体字体
带删除线字体
带删除线字体
带下滑线字体
带下滑线字体
我前面有2个空格
我前面没有空格
代码
文章图片
img 属性
- src属性（ src是source的缩写）用来设置图片的路径（URL）
- 绝对路径：完整的描述文件位置的路径
- 相对路径：由这个文件所在的文件夹引起的跟其它文件的路径关
- alt 占位文字,当图片加载失败会显示
- width 图片宽度
- height 图片高度
- img元素如果只设置了width（或height），浏览器会自动根据图片宽高比计算出height（或width）
- png：静态图片，支持透明
- jpg：静态图片，不支持透明
- gif：动态图片、静态图片，支持透明
百度一下
a元素属性
- href：指定要打开的URL; Hypertext Reference的简称
- target：在哪里打开URL
- _self：默认值，在当前窗口打开URL
- _blank：在一个新的窗口中打开URL
- _parent：在父窗口中打开URL
- _top：在顶层窗口中打开URL
- 某个iframe的name值：在某个iframe中打开URL
锚点链接: 锚点链接可以实现：跳转到网页中的具体位置
调转到P段落
回调顶部
图片链接 img元素跟a元素一起使用，可以实现图片链接
文章图片
【Web开发|Web开发 | HTML 介绍 & 使用总结 (一)】
- 可以利用base元素设置当前页面所有a元素的默认行为
- base元素写在head元素中
网页title - 锐客网
div {
outline: 2px solid green !important;
}
我是一个 div
我是个黄色标题,我后面是绿色的了.
ol-li
- ol (ordered list） 有序列表，直接子元素只能是li
- li (list item） 列表中的每一项
热门车系
- 宝马
- 奔驰
- 大众
ul-li
- ul（unordered list） 无序列表，直接子元素只能是li
- li（list item）列表中的每一项
大众车型
- 帕萨特
- 迈腾
- 凌度
- 宝来
dl-dt-dd
- dl（definition list） 定义列表，直接子元素只能是dt、dd
- dt（definition term）列表中每一项的项目名
- dd（definition description） 列表中每一项的具体描述，是对 dt 的描述、解释、补充 ,一个dt后面一般紧跟着1个或者多个dd
蔬菜+水果
- 蔬菜
- 黄瓜
- 西红柿
- 西蓝花
- 水果
- 苹果
- 香蕉
- 西瓜
table
- table-表格; tr-表格中的行; td-行中的单元格
- border: 边框的宽度
- cellpadding : 单元格内部的间距
- cellspacing : 单元格之间的间距
- width: 表格的宽度
- align: 表格的水平对齐方式left、center、right
- valign 单元格的垂直对齐方式 top、middle、bottom、baseline
- align 单元格的水平对齐方式 left、center、right
- valign 单元格的垂直对齐方式 top、middle、bottom、baseline
- align 单元格的水平对齐方式 left、center、right
- width 单元格的宽度
- height 单元格的高度
- rowspan 单元格可横跨的行数
- colspan 单元格可横跨的列数
table {
// 合并边框
border-collapse: collapse;
}
td {
border: 1px solid #000;
}
其他元素
- tbody 表格的主体
- caption 表格的标题
- thead 表格的表头
- tfoot 表格的页脚
- th 表格的表头单元格
欢迎光临万达影城
放映时间
语言版本
放映厅
售价(元)
在线选座
13:05
国语3d
2号厅
$68
13:05
国语3d
2号厅
$68
13:05
国语3d
2号厅
$68
13:05
国语3d
2号厅
$68
单元格的合并
- 合并方向是向右、向下
- 删掉被覆盖掉的td元素
td02
form表单
一般情况下，其他表单相关元素都是它form的后代元素常用属性
- action 用于提交表单数据的请求URL
- method 请求方法（get和post），默认是get
- target 在什么地方打开URL（参考a元素的target）
- enctype 规定了在向服务器发送表单数据之前如何对数据进行编码
input
单行文本输入框、单选框、复选框、按钮等元素textarea
多行文本框select、option
下拉选择框button
按钮label
表单元素的标题fieldset
表单元素组legend
fieldset的标题fieldset和legend
区域边框设置
实体字符(Character Entity)
HTML中有一些字符是预留出来作特殊用途的，比如- 小于号（<）
- 大于号（>）
- &entity_name;
- &#entity_number;
- 空格：
- 大于号：>
- 小于号：<
- &：&
<
div class="container">
<
p>
Sibling 1<
/p>
<
p>
Sibling 2<
/p>
<
p>
Sibling 3<
/p>
<
/div>
video(视频)
用来播放视频video 常用属性
- src: 用于告诉video标签需要播放的视频地址
- autoplay: 用于告诉video标签是否需要自动播放视频
- controls: 用于告诉video标签是否需要显示控制条
- poster: 用于告诉video标签视频没有播放之前显示的占位图片
- loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
- preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
- muted:静音
- width/height: 和img标签中的一模一样
- 通过集成浏览器所有支持视频播放格式,来进行兼容,浏览器会自动选择
浏览器支持视频格式
文章图片
image.png
audio(音频)
用于播放音频类文件,使用方式同视频类似常用属性
- autoplay 如果出现该属性，则音频在就绪后马上播放。
- controls 如果出现该属性，则向用户显示控件，比如播放按钮。
- loop 如果出现该属性，则每当音频结束时重新开始播放。
- preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
- src url 要播放的音频的 URL。
文章图片
image.png
该浏览器不支持播放!details 详情概要标签
在网页空间有限的时候,要展示更多的内容details内部标签
- summary: 对要展示的详细内容的简单概述,如果没有这个标签,默认就是"详细信息"
吴京
1974年，吴京出生于北京一个武术世家，是满族正黄旗[7] 。6岁开始在北京市什刹海体校练习武术。1986年，开始随武术队参加国际交流活动，同年，获得全国武术比赛拳枪刀冠军[8] 。 1989年，进入北京市武术队，并在师傅吴彬的指导下接受专业训练[9] 。1991年，获得全国武术比赛枪术、对练冠军。1994年，获得全国武术比赛精英赛枪术、对练冠军[10] 。 ASHYAS
marquee 跑马灯标签
标签主要用于滚动播放文字属性
- direction:设置滚动方向 left(默认)/right/up/down
- scrollamount: 设置滚动速度,值越大就越快
- loop: 设置滚动次数,默认是-1(无限滚动),接受数字 例如 1 2
- behavior:设置滚动类型 slide滚动到边界就停止,alternate滚动到边界就弹回
推荐阅读
- 深入理解Go之generate
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- django-前后端交互
- 私有化轻量级持续集成部署方案--03-部署web服务（下）
- 爬虫数据处理HTML转义字符
- HTML基础--基本概念--跟着李南江学编程
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- 我的软件测试开发工程师书单
- spring|spring boot项目启动websocket
- echart|echart 双轴图开发