HTML
-
HTML的结构
-
HTML是超文本标记语言的全称是(Hyper Text Markup Language)
-
超文本指用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本，也指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。（带有超链接的文本和图片）
-
标记语言是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码
-
超文本标记语言就是描述文本、图形和包含其他信息的文件组织和链接在一起的方式的一种语言
-
XHTML可扩展性的标记语言（eXtensible HyperText Markup Language）
-
<!DOCTYPE html> <!-- 声明当前文档类型是html5 文档声明必须放在第一行 --> <html lang ='en'> <!-- 一个页面只能出现一个根元素，lang ='en'表示用的是哪种自然语言（中文还是英文） --> <head> <!-- 头部元素 文档的内容不会显示到页面上(不是之间的图片文字不显示 是meta里面的属性，title标签里面的内容只会显示在网页标题栏 而不是显示页面内容) --> <meta charset='UTF-8'> <!-- meta告诉页面的信息 比如搜索针对搜索引擎和更新频度的描述和关键词 描述你这个网站是干嘛的 charset='UTF-8'指定网页当前编码 charset是属性 utf-8是属性值 --> <title>设置网页显示标题</title> </head> <body> <!--网页的主体 文字图片等内容--> 显示网页内容的区域 </body> </html>
-
以前的DOTTYPE声明特别复杂 HTML5以后简化了
- 网页：在浏览器上面所看到的每一个界面
- 网站：由每一个页面组成的一大板块
- 网页的组成部分：结构(html) + 表现(css) + 行为(javascript/js)
html就是人的骨架，css就是人穿的衣服，js就是人的动作。一个网页的好坏或者优美就像一个人骨架得结实，穿的衣服得漂亮，行为是否流畅。
- html的注释是
<!-- -->
HTML的语法
-
标签/标记/元素：放到尖括号中的第一个单词
- 双标签：成对出现的标签，开始标签 和 结束标签 结束标签名前面一定要带 / - 单标签：单独出现的标签，单标签的/可带可不带，带的话在后面的尖括号的前面属性：标签后面用空格隔开的单词
1.属性和属性值之间用 = 连接
2.属性值一般用引号引起来(引号可单可双)
3.一个标签是可以有多个属性，且属性之间没有顺序
4.每个标签都可以有属性
5.一个标签可以拥有多个属性 第一个属性必须和标签用空格隔开，其他的空格尽量也加上
<link href="" rel="stylesheet" >编辑器快捷方式：tab:向右走 shift+tab向前走 ctrl+z 撤销 ctrl+y 反撤销
HTML常用的标签
-
关注标签有哪些属性？ 属性的值是什么样的？ 该标签是双标签还是单标签？
标签名 标签的语义、效果 标签属性 单还是双 html 根标签 lang：指定：语言、国家/地区，通常为：zh-CN双 head 页面头部 双 meta 设置网页元信息 如网站是干嘛的 charset：指定字符集编码，建议设置为：UTF-8单 title 网页标题 双 body 页面主体 双 文章类的标签
标签名 标签的语义、效果 标签属性 特点 单还是双 h1~h6 标题（文字会加粗放大显示） 自动换行 独占一行 ，h1~h6 不要互相嵌套 双 p 段落 自动换行 独占一行 ， p标签不能嵌套双 br 换行（它的重点在效果） 单 hr 分割线 单 pre 按原文显示 自动换行 独占一行 双 标签名 标签的语义、效果 标签属性 特点 单还是双 em/i i表示强调，斜体字 在同一行显示 双 strong/b strong表示强调（语气更强），粗体字 在同一行显示 双 del 删除的文本 在同一行显示 双 ins/u 插入的文本,下划线 在同一行显示 双 sub 下标字 在同一行显示 双 sup 上标字 在同一行显示 双
HTML 字符实体(特殊字符)
空格 版权符号 © 注册商标 ® 左尖括号 < 右尖括号 >
空格 版权符号 © 注册商标 ® 左尖括号 < 右尖括号 >
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>卢本伟</h3>
<h4>简介</h4>
<p> <b><i>卢本伟</i></b> , ID为Wh1t3zZ, 1993年8月11日出生于香港，前皇族电子竞技俱乐部英雄联盟分部中单，在获得S3全球决赛亚军后退役。<br>
曾获<del>2011TGA成都区冠军、2011TGA总决赛冠军、 2011WCG中国区冠军、 201353全球总决赛中国区冠军 、 201353全球总决赛亚军等 荣兰 信。</del></p>
<hr >
热门事件
<p> 2017年12月8日，对于粉丝见面会辱骂事件,卢本伟在直播及微博上对网友道歉。 <sup>[1]</sup> 2018年1月17日，斗鱼直播宣布对平台主播进行处罚,<br>
<u>罚款100万元并暂停其直播间。</u><sup>[2]</sup> 2018年2月12日，卢本伟被<<焦点访谈>>点名,并实<b>施跨平台<i>封禁</i></b>。<sub>[3]</sub>
</p>
<hr >
<h4>经典语录</h4>
给阿姨倒一杯卡布奇诺。©<br>
我卢本伟是真的没有开挂。®
</body>
</html>
HTML功能标签
1.img标签的基本使用
<img src="图片地址">
src 是标签的必须属性，它用于指定图像文件的路径和文件名
-
属性 属性值 说明 src 图片路径 必须属性 alt 文本 替换文字，图片不能显示的文字 title 文本 提示文本，鼠标放到图像上显示的文字 width 像素 设置图像的宽度 height 像素 设置图像的高度 border 像素 设置图像的边框的粗细
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="https://img2.baidu.com/it/u=3455093814,1939929038&fm=253&fmt=auto&app=138&f=JPEG?w=231&h=500" width="500px" >
<img src="1.webp" width="500px" height="200px">相对路径第一种
<img src="img/2.webp" >相对路径第二种
<img src="../day2/img/nasalj.webp" > 相对路径第三种
</body>
</html>
- 绝对路径是指网页上的文件或者目录在硬盘上的真正路径`file:///C:/Users/lijingAction/Desktop/...
- 相对路径就是相对于当前文件的路径，相对路径不带有盘符，通过层级关系描述图像的位置
1. 你和要找的图片在同一个目录，且平级的情况下 直接 图片名.后缀
2. 要找的图片如果在另一个文件里面的话，要先进去 文件夹名/ 表示进一级
3. 如果你和要找的人完全处于两个不一样的文件的话 要先出去 ../ 表示出一级
2.a标签的使用-超链接
超链接标签 a 在同一行显示 双标签
1.href属性：跳转地址
<a href="http://www.atguigu.com/">尚硅谷</a>
url 除了是网页外,还可以是其它的文件(如文本文件,pdf文件等)。
url 还可以是指向HTML文件中的一个位置。
url 还可以是Email
空链接 href="#"
预览图片和txt文件
<a href="图片或者txt文件的地址/">尚硅谷</a>
下载文档 href="文档地址" docx文件 pdf文件等
<a href="atguigu.zip" download="自己起名字">下载一个zip压缩文件</a>
download属性用来设置下载文件的名称(firefox/chrome/opera支持)
2.target属性：窗口打开方式
target=_blank： 将链接内容在新的浏览窗口中打开。
target=_self： 将链接的内容，显示在目前的窗口中。 (默认)
3.扩展
网站链接 <a href="http://www.atguigu.com">尚硅谷</a>
电子邮件 <a href="mailto:lijing1@atguigu.cn">写信给我</a>
手机电话 <a href="tel:10086">10086</a>
短信信息 <a href="sms:10086">发短息给我</a>
HTML 列表标签
列表就是用来布局的,列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。 根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。
1.无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
1.`<ul></ul>` 中只能嵌套 `<li></li>`，直接在 `<ul></ul>` 标签中输入其他标签或者文字的做法是不被允许的。
2.快速创建多个列表 ul>li*数量 按下回车
3.应用场景：网页导航/新闻列表/商品列表
2.有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
1.默认数字排序
2.ol 里面的属性有：
排序方式 type="1/I/i/a/A"
排序起始值 start="数字"
3.自定义列表
<dl>
<dt>名词1（一般是图片或者文字）</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
</dl>
应用场景：上面是图片，下面是多组文字
HTML 表格标签
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。
<table>
<caption>表格名字</caption>
<thead>
<th>表格标题</th>
...
</thead>
<tbody>
<tr>
<td>单元格内的文字</td>
...
</tr>
</tbody>
<tfoot>
<tr>
<td>单元格内的文字</td>
...
</tr>
</tfoot>
</table>
-
<table></table>表格标签 -
<tr></tr>定义表格中的行 必须嵌套在table标签里面 -
<td></td>定义表格中的单元格 必须嵌套在table标签里面 -
<th></th>一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示. 表头单元格也是单元格，常用于表格第一行突出重要性. -
<caption></caption>表格标题 -
thead tbody tfood标签的属性
- align
- valign
-
tr标签的属性
- align
- bgcolor
- valign
-
td th标签的属性
-
caption标签的属性
属性 值 描述 align left right top bottom 不赞成使用。请使用样式取而代之。规定标题的对齐方式。 -
表格标签的属性：
表格属性： 表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置。
属性名 属性值 描述 width 像素值 设置表格的宽度 （建议用css设置） height 像素值 设置表格的高度 （建议用css设置） border 1或者"" 设置表格的边框 （建议用css设置） align left center right 对齐方式 left/top/center（建议用css设置） cellspacing 像素值 设置单元格之间的间隙 （建议用css设置） cellpadding 像素值 设置单元格内边距 （建议用CSS设置）
表格标签的高级用法
-
<thead>用于定义表格的头部。 内部必须拥有 标签。 一般是位于第一行。 -
<tbody>用于定义表格的主体，主要用于放数据本体 。为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用TBODY可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。
3.<tfoot> 用于表格底部的内容，一般用于总计，可以没有。
合并单元格
特殊情况下,可以把多个单元格合并为一个单元格。
-
rowspan="合并单元格的个数"，最上侧单元格为目标单元格, 写合并代码
-
colspan="合并单元格的个数"， 最左侧单元格为目标单元格, 写合并代码
1.确定是行合并还是列合并 单元格用横线隔开的就是行合并，竖线隔开的就是列合并 2.确定合并单元格的个数，合并几个单元格，值就是几 3.将属性和值加到单元格合并的起始位置 4.将(多余的)被挤出来的单元格删掉或者注释掉
