day21-html基础语法笔记
2018-08-13 本文已影响0人
向前冲我在路上
一、web基础：
- web标准:（万维网-W3C）
机构标准：HTML ---决定网页上有什么东西（能够显示什么内容），给网页提供内容
边线标准：CSS ----决定网页上内容的布局和显示样式
行为标准：javascript(js)--决定网页动态的效果或者变化的页面效果 - 认识HTNL
HTML是超文本标记语言（可以用来标记文本、图片、视频、音频、flash、按钮、输入框等内容）。
HTNL 不是编程语言，不会编译执行，语法错误也不会报错导致程序不能往后运行。 - HTNL版本
广义的H5：指HTNL5+CSS3+js
狭义的H5：HTNL5 - HTNL编程
a. HTNL标记语言对应的文件后缀，一般都是html
b. HTNL的结构：整个网页通过不同的标签来组成。 - 标记/标签
a. 双标签（常规标签）
<标签名 属性=属性值 属性=属性值>标签内容</标签名>
b. 单标签（自闭合标签）
<标签名 属性=属性值 属性=属性值 />
<标签名 属性=属性值 属性=属性值 >
说明：
标签名：HTNL标准中固定的（注意：和标签名之间不能有空白）
属 性 ：属性和标签名之间用空格隔开，以属性=属性值的形式存在，多个属性之间也用空格隔开，
（属性可以是HTNL中的属性，也可以是自定义的属性）
标签内容：是指开始标签和结束表标签之间的内容（单标签没有）。标签的内容可以任何内容（可以是字符串，也可以是其他任何标签）
<a></a> --- a标签
<p></p> --- p标签
<input> --- input标签
补充：
HTML 中不区分大小写 (HTML html 或者 HTml都是一样的）
- 网页的机构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>你是我的页</title>
</head>
<body>
</body>
</html>
<!--对当前的版本进行说明,默认版本html（HTML5）-->
<!DOCTYPE html>
<!--html标签代表整个网页-->
<html>
<!--
head标签中的内容一般都是看不见的，并且里面的子标签是固定的，功能是对网页进行设置性的设置：
title标签
meta标签---charset属性
link标签
style标签
script标签
base标签
-->
<head>
<meta charset="utf-8" />
<!--设置网页标题（可见标签）-->
<title>HTML基础</title>
</head>
<!--描述：body标签中的内容，负责整个网页的显示内容。-->
<body>
</body>
</html>
二、文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本标签学习</title>
</head>
<body>
<!--1. 标题标签-->
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五极标题</h5>
<h6>我是六级标题</h6>
<!--
2. 段落标签p
a. 一个p标签对应一个段落
b. p标签的内容结束后和其他的内容之间默认有一个空行。
-->
<p>这是第一个段落\nhahh</p>
<p>这是第二个段落\nhahh</p>
<p>
简书笔记是定位于写作者的一款写作软件，界面非常简洁，其最大的特色是支持 Markdown 功能，希望为作者制造出一种沉浸式的写作氛围，进而可以专注于写作。
简书还支持写作模式，在简书·笔记中打开写作模式即可让撰写窗全屏化，再配合 Chrome 等浏览器的全屏浏览功能。简书·笔记能够达到与 Q10、MTW 之类的专心致志写作软件同样的效果。
</p>
<!--
3. 文本符号
----空格,以分号结束。
½---表示分数，1/2,二分之一
-->
½
<!--
4. 换行标签<br>
-->
<!--
5. 超链接标签<a>
-->
<a href="http://www.baidu.com">百度一下</a>
<!--
6. 加粗标签
<b>加粗内容</b>
<strong>加粗内容（有强调作用）</strong>
-->
<p>
简书笔记是定位于写作者的一款写作软件，界面非常简洁，其最大的特色是支持 Markdown 功能，希望为作者制造出一种沉浸式的写作氛围，进而可以专注于写作。
简书还支持写作模式，在简书·笔记中打开写作模式即可让撰写窗全屏化，再配合 Chrome 等浏览器的全屏浏览功能。简书·笔记能够达到与 Q10、MTW 之类的专心致志写作软件同样的效果。
</p>
<p>
简书笔记是定位于写作者的一款写作软件，界面非常简洁，其最大的特色是支持 Markdown 功能，希望为作者制造出一种沉浸式的写作氛围，进而可以专注于写作。
简书还支持写作模式，在<strong>简书·笔记中</strong>打开<b>写作模式即可让撰写窗全屏化</b>，再配合 Chrome 等浏览器的全屏浏览功能。简书·笔记能够达到与 Q10、MTW 之类的专心致志写作软件同样的效果。
</p>
<!--
7. 文字倾斜（i/em）
<i>倾斜内容</i>
<em>倾斜内容</em>
-->
<p>
简书笔记是定位于写作者的一款写作软件，
界面非常简洁，其最大的特色是支持 Markdown 功能，
希望为<i>作者制造出一种沉浸式的写作氛围</i>，进而可以专注于写作。
简书还支持写作模式，在简书·笔记中打开写作模式即可让撰写窗全屏化，
再配合 Chrome 等<em><b>浏览器的全屏浏览</b></em>功能。简书·笔记能够达到与 Q10、MTW 之类的专心致志写作软件同样的效果。
</p>
<!--
8. 水平线
<hr />>
-->
<hr />
</body>
</html>
三、列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表
ol
-->
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
<!--无序列表
ul
-->
<ul>
<li>成都</li>
<li>重庆</li>
<li>北京</li>
</ul>
<!--自定义列表dl
dt
dd
-->
<dl>
<dt>城市</dt>
<dd>成都</dd>
<dd>合肥</dd>
</dl>
<a href="04-图片和超链接.html" >返回</a>
</body>
</html>
四、图片与超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1. 图片标签
a. src属性：图片的地址（本地地址，网络地址）
本地路径：绝对路径和相对路径（相对于工程目录）
注意：本地图片需要放到工程目录下的img文件中
b. title属性：图片的标题（鼠标停留在图片上，隔一段啊时间才会显示出来。
c. alt属性：图片加载失败后显示的提示信息。
网络地址：超链接
-->
<h2>图片1</h2>
<img src="img/001.jpg" title="保时捷"/><br />
<img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg" alt="出错了" /><br />
<!--2. 超链接（a）
网页上点击后可以跳转的标签
href属性：跳转的地址（本地地址，网络地址）
本地地址：当前工程的其他的.htnl文件路径
网络地址：跳转到对应的网页
空串或者#：刷新页面会回到顶部
选择器：让当前网页滚动到网页的任意位置。
target属性：
_self（默认的）:在当前页面中打开href的地址
_blank:在新的页面打开href的地址
_top:
_parent:跳转页面时，从其他页面返回本页面的值
a. 点击文字跳转
-->
<h1>图片2</h1>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<a href="03-列表.html" target="_parent">列表标签</a>
</body>
</html>
五、表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--table -- 标签代表这个表格
tr ---代表的是一行
td ---代表的是一列
一个表格中可以有多行，一行有多列
table属性：
1. border：设置整个表格的边框的宽度
2. width：设置整个表格的宽度
3. height：设置整个表格的高度
4. align:center --让整个表格在其父标签中居中
5. bgcolor:背景颜色
6. cellspacing：单元格与单元格之间的间距，0表示没有间距
7. cellpadding：单元格和内容之间的空隙，左上右下 0,0,0,0
8. bordercolor:边框的颜色
9. 合并单元格：
注意：所有的值都要用引号括起来
tr属性：
1. height：设置单独的某一行的高度
2. align：center -- 让当前行里的所有内容居中
3. bgcolor:背景颜色
td属性：
1. width：设置单独某一列的宽度
2. align：center-- 让某一个单元格中的内容居中
3. bgcolor:背景颜色
-->
<table border="1" width="500" height="40" cellspacing="0" cellpadding="20" align="center" >
<tr align="center">
<td>姓名</td>
<td>成绩</td>
<td>是否留级</td>
<td>是否留级</td>
<td>是否留级</td>
<td>是否留级</td>
</tr>
<tr align="center">
<td>张飞</td>
<td>89</td>
<td>否</td>
<td>否</td>
<td>否</td>
<td><center>否</center></td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="30,0,30,30">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
</html>
六、复杂的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复杂的表格</title>
</head>
<body>
<table width="400" height="100" border="1" cellspacing="0" cellpadding="">
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td><!--//rowspan:行合并-->
<td></td>
</tr>
<tr>
<td></td> <!--//colspan:列合并-->
</tr>
</table>
</body>
</html>
