html知识总结

一、html文档结构

<!-- html文档的声明,告诉浏览器是html文档 -->
<!DOCTYPE html>
<!-- html是根元素,lang是语言,默认英语en,汉语是zh-Hans -->
<html lang="zh-Hans">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>PHP中文网</title>
  <link rel="stylesheet" href="style.css">
  <script src="" charset="utf-8"></script>
</head>
<body>
  <h1>PHP中文网!</h1>
  欢迎观看:<a href="http://www.php.cn">PHP中文网</a>
</body>
</html>

总结:
1.声明

<!DOCTYPE html>
2.lang
英语是en


image.png
image.png

4.meta 元数据


image.png

image.png

5.title网页标题


image.png

6.link


image.png

7.script 用来引入脚本
image.png

二、html常用元素

2.1段落,标题,格式化输出

段落,<p 标签
标题,<h 标签


image.png

格式化输出


image.png
2.2行内文本详解


单独一行添加横线
<del></del>给中间的文字添加删除线
<s></s>给中间的文字添加删除线
<ins></ins>给中间的文字添加下划线
</u>下划线
</strong>加粗
</b>加粗
</em>斜体
</i>斜体
</mark>高亮显示
<code>用来包装文本中的额代码片段。经常套在<pre>标签中使用

2.3表格

包含标题,头部,主题,底部


image.png

代码如下:


image.png

image.png
2.4图片元素

<img>标签
src中可以放本地图片地址也可以是网络地址
width是设置图片宽度,长度等比例缩放
alt是添加图片说明文字,便于浏览器收录


image.png
2.5有序列表

有序列表用<ol>标签包装
内部列表项勇<li>标签说明
默认从1顺序排列
reversed 逆序排列
start可以设置起始序列号


image.png

image.png

结果:


image.png
2.6无序列表

无序列表用<ul>标签包装
内部列表项勇<li>标签说明


image.png

结果:


image.png

有序列表和无序列表可以嵌套使用
2.7描述列表
image.png

一对<dl>标签进行包装
要描述的对象,放在一对<dt>标签中
具体的内容,放在一对<dd>标签中


image.png

结果:


image.png

三、html常用表单元素

表单是网页中数据采集的工具
组成:


image.png
3.1<from>标签中的属性
image.png

语法:


image.png
image.png
image.png

示例:


image.png

结果:


image.png
3.2常用表单控件的元素,type
image.png

实例:


image.png
image.png
image.png
image.png
3.3下拉框与分组

下拉框由标签<select>和<option>组成。
变量名保存在<select>标签的name属性中。
变量的值保存在<option>标签的value属性中。
默认项由<option>标签中selected属性说明。

image.png

分组由<optgroup>标签中label设置


image.png
3.4<lable>表单元素描述标签
image.png
3.5文本域<texttarea>
image.png
3.6表单元素分组标签<fieldset>

<fieldset>标签默认加边框,可以加背景,去除边框


image.png

四、H5新增表单元素

4.1H5新增表单属性
image.png

实例:


image.png
image.png
image.png
image.png
4.2H5新增表单类型(input属性type对应的值)
image.png

实例:


image.png
image.png
image.png

效果:


image.png

五、H5新增的视频与音频元素

5.1视频标签<video>

src:指示视频源
width:设置宽度,高度随宽度等比缩放,两者选一个设置
controls:显示视频控制按钮
autoplay:视频加载时自动播放
preload:预加载,和autoplay是互相排斥的
poster:制定视频封面,不指定封面显示视频第一帧
muted:播放时静音
loop:循环播放


image.png
5.2音频标签<audio>

标签属性和视频相同


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,039评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,426评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,417评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,868评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,892评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,692评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,416评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,326评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,782评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,957评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,102评论 1 350
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,790评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,442评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,996评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,113评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,332评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,044评论 2 355

推荐阅读更多精彩内容

  • 文档结构 HTML文档结构的实例和实例的运行结果 请看图 ↓ 文档结构中的每个标签后面都写了详细的注释...
    州了个州阅读 802评论 0 2
  • 第一部分 开篇 第一章 HTML5背景知识1 1.1历史 HTML诞生于20世纪90年代初,本书重在讲H5的几个重...
    卧龙Tristan阅读 2,196评论 0 0
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,220评论 0 8
  • 一、理论基础知识部分 1.1、讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起T...
    我家媳妇蠢蠢哒阅读 3,128评论 2 106
  • 格式后期处理。 Jeremy Keith在 Fronteers 2010 上的主题演讲 今天我想跟大家谈一谈HTM...
    LordZhou阅读 1,127评论 0 17