day19_HTML

HTML 指的是超文本标记语言(Hyper Text Markup Language)
XHTML 指可扩展文本标记语言(EXtensible)
超文本指的是图片

HBuilder新建web项目
项目里面有一个默认的index.html文件，那是项目的入口

1.web标准(由万维网(www=w3c)指定的网页开发规范)
结构标准 - html(决定网页上的内容)
表现标准 - css(决定网页上内容的布局和样式)
行为标准 - javascript(简称js，决定网页上动态变化的内容)

2.什么是html？
html是超文本标记语言(类似MarkDown语法)
html是通过不同的标记(标签)来决定网页上的不同内容，学习html就是学html中的标签(标记)

3.html语法
a.html大小写不敏感，html == HTML
b.标签(标记)
a.语法
双标签：<标签名属性名1=值1 属性名2=值2 ...>标签内容</标签名>
单标签：<标签名属性名1=值1 属性名2=值2 .../> 或者 <标签名属性名1=值1 属性名2=值2 ...>
b.说明
标签名 - 必须是html提供的标签名，不能随便写
属性 - 以'属性名=值'的形式成对出现的，多对之间用空格隔开；属性的顺序可以任意，不会影响效果
值必须放在双引号中
标签内容 - 只有双标签才用标签内容；标签内容可以是任何内容(不光是文字、图片还可以是其他一个或多个标签)

DOCTYPE:说明html版本
html - html5

html结构
网页内容结构：
<html> - 代表整个网页
<head></head> - 显示网页标题顶部的位置
<body></body> - 网页内容部分
</html>

head中标签

head中主要有以下标签：

meta - 定义HTML文档中的元数据 (设置网页的基本设置)
实例 1 - 定义文档关键词，用于搜索引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
实例 2 - 定义web页面描述：
<meta name="description" content="Free Web tutorials on HTML and CSS">
实例 3 - 定义页面作者：
<meta name="author" content="Hege Refsnes">
实例 4 - 每30秒刷新页面：
<meta http-equiv="refresh" content="30">

title - 设置网页标题
style - 在html中提供css代码对应的标签
link - 导入图标/CSS文件的标签
script - 导入js代码/文件的标签
base - url的基本地址

<!DOCTYPE html>
<html>
    <head>
        <!--设置网页中文本的编码方式-->
        <meta charset="UTF-8">
        
        <!--设置网页标题-->
        <title>head中的标签</title>
        
        <!--设置网页图标
            rel - 设置文件作用，stylesheet：样式表，icon：图标
            type - 设置文件类型，文件类型/文件后缀；text/css:文本/后缀是css；image/ico：图片/后缀是ico
            href - 设置文件路径；可以是绝对路径也可以是相对路径
        -->
        <link rel="icon" type="image/ico" href="img/aaa.ico"/>  <!--设置标题旁边的小图标-->
    </head>
    <body>
    </body>
</html>

文本标签

1.如果需要在网页中显示文字，一般不直接将文字写在body中而是根据这个文字的功能找到对应的标签

1.标题标签(h1-h6)
双标签

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<h7>标题7</h7> <!--没有此标签的时候，只会将标签内容显示出来，没有特殊意义-->

2.段落标签(p标签)
双标签，保证一个段落对应一个p标签

<p>
竹子用了4年扎根，第五年一出头就被做成竹笋炒肉。
</p>

3.font标签
双标签，font标签会显示在一行

<font>性别</font>
<font>男</font>
<font>女</font>

4.文字效果相关标签
在html中直接敲回车、空格或者缩进是无效的

- 单标签，让网页中的内容强制换行
- 不换行空格，全称No-Break Space(一个" "代表一个按下一个space键产生的空格)
- 全角空格，全称是Em Space(1 em在16px的字体中就是16px，占据的宽度正好是1个中文宽度)

<b></b> - 加粗
<strong></strong> - 加粗(有强调的意义)
<i></i> - 倾斜
<em></em> - 倾斜(有强调的意义)
-->
<p>
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />
</p>

列表标签

1.无序列表(ul)
ul标签 - 代表列表容器，是一个整体
li标签 - 列表中的元素

<ul>
<li>Python</li>
<li>H5</li>
<li>Java</li>
<li>Testing</li>
</ul>

2.有序标签(ol)
ol标签 - 代表列表容器，是一个整体
li标签 - 列表中的元素

<ol>
<li>挑选小龙虾</li>
<li>清理小龙虾</li>
<li>煮小龙虾</li>
</ol>

3.自定义列表
dl标签 - 代表列表容器，是一个整体
dt标签 - 小分类标签(名词)
dd标签 - 小分类下面的元素(解释)

<dl>
<dt>四川</dt>
<dd>成都</dd>
<dd>绵阳</dd>
<dd>眉山</dd>
<dt>重庆</dt>
<dd>长寿</dd>
</dl>

图片和超链接

1.图片标签(img)
单标签
默认情况下一行可以显示多张图片

a.src属性：设置图片地址/路径；可以是本地路径也可以是网络地址
b.title属性：设置图片标题(当鼠标停留在图片上才会显示出来)
c.alt属性：图片加载失败的时候的提示信息

<img src="img/luffy.jpg" title="路飞" alt="图片不存在！"/>

2.超链接
双标签

href属性：跳转的目的地
网址 - 点击超链接直接跳转到网址对应的网页
本地html文件地址 - 点击超链接直接加载本地文件对应的html

# - 刷新
选择器 - 让当前页面滚动到指定的位置

target属性：跳转方式
_self - 在当前页面中加载新的网页(默认值)
_blank - 在新的页面中加载新的网页

<!--加载网页-->
<a href="https://www.baidu.com" target="">百度一下</a>
<a href="https://www.baidu.com"><img src="img/aaa.ico"></a>
<br />

<!--加载本地html文件-->
<a href="03-列表标签.html">列表标签</a>
<br />

<!--刷新当前网页-->
<a href="#">刷新网页</a>
<br />

<!--页面内跳转-->
<!--<a href="#top">跳转到顶部</a>-->  <!--#是id选择器-->

<img src="img/aaa.ico" />
<font>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="https://about.jd.com/privacy/" style="text-decoration: none;">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</font>

表格标签

表格
标签
1.table标签 - 代表表格整体
cellspacing属性：设置表格中单元格和单元格以及单元格和表格框的间距
bgcolor属性：设置整个表格背景颜色(包含单元格的部分)
cellpadding：设置单元格中的内容到单元格(上下左右)的边距(即内边距)
width：设置整个表格的宽度
height：设置整个表格的高度
align：center(居中),left(居左),right(居右);设置整个表格在它的父标签里面对齐方式

border属性：设置单元格边框的宽度(将每个单元格添加边框)
bordercolor：设置边框的颜色

2.tr - 代表表格中的一行
bgcolor属性：设置一行中所有单元格的背景颜色
height：设置一行的高度
align：设置一行中的所有内容在它的单元格里面对齐方式

3.td - 代表表格中的一个单元格<br />
bgcolor属性：设置指定单元格的背景颜色
width：设置指定单元格一列的宽度
align属性：让当前单元格中的内容在单元格中的对齐方式

补充：细线表格

设置整个table的背景颜色是边框线的颜色
设置每个单元格的颜色和边框线颜色不一样
设置单元格和单元格的间距(cellspacing)为1

通过boder设置的边框实际是boder的两倍(因为紧挨着的边框是两个,间距就会加倍)2,4,6

<table cellspacing="1" bgcolor="black" cellpadding="5" width="240" height="150">
<!--第一行-->
<tr bgcolor="white" height="20">
<td width="80">姓名</td>
<td bgcolor="aquamarine">成绩</td>
<td>学员评价</td>
</tr>
<!--第二行-->
<tr bgcolor="greenyellow" align="right">
<td>张三</td>
<td>80</td>
<td>不留级</td>
</tr>
<!--第三行-->
<tr bgcolor="pink">
<td align="center">李四</td>
<td>92</td>
<td>不留级</td>
</tr>
<!--第四行-->
<tr bgcolor="orange">
<td>王五</td>
<td>68</td>
<td>留级</td>
</tr>
</table>
<br />

<table cellspacing="0" border="1" bordercolor="red" align="center"> <!--由于紧挨着的边框是两个,间距就会加倍,故border设置的边框是cellspacing的两倍-->
<!--第一行-->
<tr bgcolor="white">
<td>姓名</td>
<td bgcolor="aquamarine">成绩</td>
<td>学员评价</td>
</tr>
<!--第二行-->
<tr bgcolor="greenyellow">
<td>张三</td>
<td>80</td>
<td>不留级</td>
</tr>
<!--第三行-->
<tr bgcolor="pink">
<td>李四</td>
<td>92</td>
<td>不留级</td>
</tr>
<!--第四行-->
<tr bgcolor="orange">
<td>王五</td>
<td>68</td>
<td>留级</td>
</tr>
</table>
<br />

<table cellspacing="1" border="1" bordercolor="red">
<!--第一行-->
<tr bgcolor="white">
<td>姓名</td>
<td bgcolor="aquamarine">成绩</td>
<td>学员评价</td>
</tr>
<!--第二行-->
<tr bgcolor="greenyellow">
<td>张三</td>
<td>80</td>
<td>不留级</td>
</tr>
<!--第三行-->
<tr bgcolor="pink">
<td>李四</td>
<td>92</td>
<td>不留级</td>
</tr>
<!--第四行-->
<tr bgcolor="orange">
<td>王五</td>
<td>68</td>
<td>留级</td>
</tr>
</table>

复杂表格

colspan:列合并
rowspan:行合并

<table style="display: none;" cellspacing="0" border="1" bordercolor="black" width="500" height="240">
<!--第一行-->
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td colspan="2">1</td>
</tr>

<!--第二行-->
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td colspan="2">2</td>
</tr>

<!--第三行-->
<tr>
<td>3</td>
<td colspan="2">3</td>
<td rowspan="3">3</td>
<td colspan="2" rowspan="3">3</td>
</tr>

<!--第四行-->
<tr>
<td>4</td>
<td colspan="2">4</td>
</tr>

<!--第五行-->
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>

<!--第六行-->
<tr>
<td rowspan="2">6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>

<!--第七行-->
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
</table>
<br />

<table cellspacing="0" border="1" bordercolor="black" width="500" height="240">
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2" rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
</table>