HTML基础
2018-08-14 本文已影响0人
蘑菇plus
HTML基础
web基础
web标准
结构标准:HTML--决定网页上有什么东西(能够显示什么内容)
表现标准:css--决定网页上内容的布局和显示方式
行为标准:JavaScript(js)--决定网页上的动态的效果
2.认识HTML
超文本标记语言(可以用来标记文本，图片，视频，音频，flash，按钮，输入框等网页内容)
HTML不是编程语言，不会编译执行，语法错误也不会报错导致程序不能往后运行。
3.HTML版本
H5:
广义的H5:指HTML5+CSS3+js
狭义的H5:HTML5
4.HTML编程
a.HTML标记语言对应的文件后缀，一般都是html
b.HTML的结构:整个html都是通过不同的标签来组成
5.标签/标记
a.双标签(常规标签)
<标签名>属性=属性值 属性=属性值</标签名>
b.单标签(自闭合标签)
<标签名 属性=属性值 属性=属性值/>
<标签名 属性=属性值 属性=属性值>
说明:
标签名:HTML标准中固定的(注意:<标签名之间不能有空白)
属性:属性和标签名之间用空格隔开，以属性=属性值形式存在，多个属性之间也用空格隔开(属性可以是HTML标准中的属性，也可以是自定义的属性)
标签内容:是指开始标签和结束标签之间的内容。标签的内容可以是任何内容(可以是字符串，也可以是任何标签)
<a></a>--a标签
<input标签>--input标签
补充:HTML语法中，不区分大小写(HTML/html)
6.网页结构
-->
<!--
DOCTYPE:来对当前的html版本进行说明
HTML--默认版本(HTML5)
-->！
<!DOCTYPE HTML>
<html>
<!--head标签中的内容一般是看不见的，并且里面的子标签是一些固定的
title标签--设置标题
meta标签
link标签3
style标签
script标签
-->
<head>
<!--设置网页标题(可见)-->
<title>HTML标题</title>
<meta charset="utf-8"/>
</head>
<!--body标签中的内容，负责整个网页的显示部分-->
<body>
</body>
</html>
文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.标题标签(h1-h6)-->
<h1>我是标题h1</h1>
<h2>我是标题h2</h2>
<h4>我是标题h4</h4>
<h6>我是标题h6</h6>
<!--2.段落标签(p)
a.一个p标签对于一个段落
b.p标签的内容结束后会和其他的内容之间默认有一个空行
-->
<p>默认情况下，Git会按照你提供的 URL 所指示的项目的名称创建你的本地项目目录。 通常就是该 URL 最后一个 / 之后的项目名称。<br>，如果你想要一个不一样的名字， 你可以在该命令后加上你想要的名称。</p>
<!--3.文本符号
--空格
-->
<!--4.换行标签（br）
-->
<!--5.超链接(a)-->
<a href="http://www.baidu.com"><strong>百度一下</strong></a><br>
<!--6.加粗标签
<b>加粗文字</b>
<strong>文字加粗</strong>---有强调作用
-->
<strong>文字加粗</strong><br>
<!--7.文字倾斜(i/em)-->
<i>文字倾斜</i><br>
<em>倾斜</em>
<!--8.水平线-->
<hr></hr>
</body>
</html>
<html>
<head>
<title><strong>This is my frist HTML</strong></title>
</head>
<body>
</body>
</html>
列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--有序列表
ol
-->
<ol>
<li>语文</li>
<li>数学</li>
<li>English</li>
</ol>
<!--无序列表-->
<ul>
<dt>杭州</dt>
<dd>西湖</dd>
<li>成都</li>
<li>苏州</li>
<li>北海</li>
</ul>
<!--自定义列表-->
<dl>
<dt>北海</dt>
<dd>菇凉</dd><!--解释说明-->
<dt>苏州</dt>
<dd>苏宁</dd>
</dl>
</body>
</html>
图片与超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.图片标签(img)
a.src属性:图片的地址(本地地址、网络地址)
本地地址:相对路径(相对于工程目录)
注意:本地图片需要放到工程目录下的img文件夹下
b.title属性：图片的标题(鼠标停留在图片上，隔一段时间才显示出来)
c.alt属性：图片加载失败后显示的提示信息
-->
<h1>图片1</h1>
<img src="img/luffy.png"/>
<img id="image1" alt="图片加载失败" title="山治" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534152944837&di=6f15150dbd694d66d199f66c6b0c6612&imgtype=0&src=http%3A%2F%2Fp6.qhimg.com%2Ft01764dfada8dc1af26.jpg"/>
<h1 id="imge2">图片2</h1>
<img src="img/luffy.png"/>
<h1>图片3</h1>
<img src="img/luffy.png"/>
<!--2.超链接（a）
网页上点击后可以跳转的标签都是超链接
href属性:跳转地址(本地地址，网络地址)
网络地址：跳转到对应的网页
本地地址: 当前工程的其他的html文件路径
空串/#: 刷新页面回到网页的顶部
选择器：让网页滚动到网页上的任意的位置
target属性：
_self(默认的): 在当前页面中打开href的地址
_blank: 在新的页面中打开href的地址
a. 点击文字跳转
-->
<a href="#">百度一下</a>
<a href="03-列表.html" target="_blank">列表</a>
<a href="#imge2">图片2</a>
<a href="#image1">图片11111</a>
<!--b.点击图片跳转-->
<a href="http://www.mobiletrain.org/?pinzhuanbdtg=biaoti">
<img src="img/luffy2.png"/>
</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=''100''--边框之间的间隙
7. cellpadding--单元格与内容之间的间隙
8.bordercolor--边框颜色
tr属性:
1.height:设置单独的某一行的高度
2.align:center--让当前行里面的所有单元格的内容居中
3.bgcolor--颜色
td属性:
1.width:设置某一列的宽度
2.align:center--让某一个单元列的内容居中
3.bgcolor--颜色
-->
<table border="1" width="600" align="center" bgcolor="aquamarine" cellspacing="5" cellpadding="50" bordercolor="red">
<!--第一行-->
<tr height="300" align="center">
<!--第一行第一列-->
<td width="90">姓名</td>
<!--第一行第二列-->
<td width="150">成绩</td>
<!-- 第一行第三列-->
<td width="70">是否留级</td>
</tr>
<!--第二行-->
<tr height="100">
<td align="center" bgcolor="red">陈丹丹</td>
<td>95</td>
<td>否</td>
</tr>
<!-- 第三行-->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
复杂表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复杂表格</title>
</head>
<body>
<!--
rowspan:合并行
-->
<!--表格1-->
<table border="1" height="400" width="400">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table border="1" width="400" height="300">
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
