day16一 HTML基础
一 HTML基础语法
1.1 什么是HTML
HTML(Hypertext Markup Language) - 超文本标记语言
标记语言 - 在不同的文本中加不同的标记让文本的意义和功能不同，例如：
markdown，html
HTML大小写不敏感：html == Html == HTML == hTMl(大写小写功能一样)
1.2 标签 - 就是标记
标签是HTML的基本结构，不同的标签功能不一样
标准标签：<标签名 属性1=属性值1 属性2=属性值2 …>标签内容
单标签：<标签名 属性1=属性值1 属性2=属性值2 …>
<标签名 属性1=属性值1 属性2=属性值2 …/>
说明：
a.<>和/ - 固定写法
b.标签名 - 不是程序员自己命名，有哪些标签名是HTML规定好的。哪些标签是双标签，哪些标签是单标签也是固定的。
注意：标签名前后不能随意添加空格
c.属性 - 以 属性=属性值 的形式存在，多个属性之间用空格隔开;不同的标签有哪些属性是确定的;属性值不管是什么值都必须放在""中
d.标签内容 - 双标签（标准标签）开始标签和结束标签中间的部分就是标签内容；
标签内容很灵活，可以是独立的文本、标签、多个标签、多个标签和文本的组合。
1.3 标签的分类
① 从可见标签来分：
可见标签：p标签、a标签、img标签
不可见标签：meta标签、tyle标签、script标签、link标签
② head中标签和非head中的标签(body标签)
head中的标签：
meta、title、style、link、script、base
body标签：
p、a、b、img、table、lable、ul、ol、li、style、link、script、base等
二 head中的标签
head中可以使用的的标签：
meta、title、link、style、script、base
meta标签 - 网页元数据，主要用来对网页进行基本设置，包括：设置文本编码方法、设置网页搜索关键字、网页简介、网页类型
title标签 - 网页标题
link标签 - 导入外部文件(导入图片作为网页图标、导入外部像是表)
2.1 link标签的使用
rel属性 - 设置导入文件的作用。stylesheet：外部样式表 icon：网页图标
type属性 - 指定导入文件的类型和后缀。文件类型/文件后缀名
text/css：导入一个后缀是.css的文本文件
image/png：导入一个后缀是.png的图片文件
href属性 - 设置被导入的文件路径
<link rel="icon" type="image/ico" href="img/jd_logo.ico" />
2.2 文件路径的写法
- 绝对路径：文件在计算机中的全路径
- 相对路径：
① 使用.表示当前目录(当前目录是指当前写代码的文件对应地址（其实就是包含当前写代码的文件夹的目录）)
②使用…表示当前目录的上层目录
③使用…表示当前目录的上上层目录
三 文本标签
3.1 标题标签 - h1~h6
如果文本的意义是标题的时候就选标题标签
<h1>欢迎来到德莱联盟</h1>
<h2>欢迎来到德莱联盟</h2>
<h3>欢迎来到德莱联盟</h3>
<h4>欢迎来到德莱联盟</h4>
<h5>欢迎来到德莱联盟</h5>
<h6>欢迎来到德莱联盟</h6>
3.2 段落标签：p
一个段落就对应一个p标签
3.3 其他的普通文字标签：font 、span
font的size - 设置字体大小
font的color - 设置字体颜色
3.4 文本效果相关的标签和符号
html手动敲回车无用，手动添加空格也没有用。
如果需要在内容中加换行，需要添加
标签
如果需要在内容中加空格，需要添加html符号: (空一个像素) (空一个空格)
加粗标签:b标签、strong标签(有强调的意思)
倾斜标签:i标签、em标签(有强调的意思)
四 列表
4.1 无序列表:ul-li
ul标签 - 表示整个容器
li标签 - 列举容器中所有的元素,个数和元素的个数一直
例如：
[python,java,h5,ui,测试]
<h1>学科介绍h1>
<ul>
<li>pythonli>
<p>主要提供人工智能和数据分析的解决方案p>
<li>javali>
<p>注重于分布是开发p>
<li>h5li>
<li>uili>
<li>测试li>
ul>
4.2 有序列表:ol-li
ol标签 - 表示整个列表
li标签 - 表示列表中的元素
例如：
<h1>麻辣小龙虾的做法h1>
<ol>
<li>将小龙虾清洗干净li>
<img src="./img/百度.jpg.png" >
<li>准备材料:,花椒,姜,蒜,啤酒,火锅底料li>
<li>炒料:用火锅底料加,花椒,姜,蒜炒香li>
<li>加小龙虾继续炒li>
<li>加入啤酒焖煮li>
ol>
4.3 自定义列表:dl-dt-dd
dl标签 - 表示整个列表
dt标签 - 分类
dd标签 - 每个分类中的元素
例如：
<h1>高中学科h1>
<dl>
<dt>理科dt>
<dd>物理dd>
<dd>化学dd>
<dd>生物dd>
<dt>文科dt>
<dd>政治dd>
<dd>地理dd>
<dd>历史dd>
<dt>综合dt>
<dd>语文dd>
<dd>数学dd>
<dd>体育dd>
dl>
五 图片和超链接
5.1 图片标签:img
a.src属性 - 图片地址
可以是本地图片的相对路径,也可以是网络图片地址
b.title属性 - 设置图片标题(鼠标悬停在图片上的时候才会显示)
c.alt属性 - 图片加载失败的提示信息
5.2 超链接:a
a.标签内容 - 超链接可点击可见的部分
b.href属性 - 跳转目的地
①网页的地址 - 直接跳转到指定的网页
②本地html文件路径 - 直接打开html文件对应的页面
③id选择器(id属性值前加#) - 将当前页面滚动到id选择器指定的位置
c.target属性 - _self(默认值),在当前页面中加载新的页面
_blank,在新的窗口中加载新的页面
六 表格标签
表格标签:table-tr-td
table - 表示真个表格
tr - 表示一行
td - 表示一个单元格
-
table:
border属性 - 设置边框线的宽度(默认值是0)
cellspacing属性 - 设置单元格与单元格之间的空隙(默认值是1)
bgcolor属性 - 设置整个表格的背景颜色
width属性 - 设置整个表格的宽度
height属性 - 设置整个表格的高度
cellpadding属性 - 设置表格内容和边框之间的距离
align属性 - left/right/center;设置整个表格在网页中的对齐方式 -
tr:
bgcolor属性 - 设置一行的背景颜色
height属性 - 设置一行的高度
align属性 - left/right/center;设置一行的对齐方式 -
td:
bgcolor属性 - 设置一个表格的颜色
width属性 - 设置td所在列的宽度
align属性 - left/right/center;设置指定单元格内容的对齐方式