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>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,937评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,503评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,712评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,668评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,677评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,601评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,975评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,637评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,881评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,621评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,710评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,387评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,971评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,947评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,189评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,805评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,449评论 2赞 342