1.web标准：
web前端的内容：HTML、CSS、JavaScript
web标准(万维网-W3C指定的)中规定HTML是结构标准，CSS是表现标准, JS是行为标准
a.HTML结构标准中规定了网页上能够显示的内容，比如显示文字、图片、音频、视频、Flash、按钮、输入框等....
b.CSS表现标准规定网页的内容的布局和样式，比如内容该显示在什么位置，内容是什么颜色、多大、多宽等....
c.JS行为标准规定网页的内容在某种情况下发生什么样的改变（动态变化）
（1）..HTML
a.什么是html
HTML又叫超文本标记语言（是标记语言，不是编程语言）
b.html版本
狭义的h5: 指html第5个大版本
广义的h5: 指的是html5+CSS3+javascript
c.html文件结构(由不同的标签组成)
<html>
<head>
内容是不可见的
</head>
<body>
内容是可见的
</body>
</html>
（2）.HTML中的标签
网页中的内容就是通过html中的不同的标签(标记)来确定
标签语法：
a.常规标签(双标签): <标签名 属性名1=属性值1 属性名2=属性值2...>标签内容</标签名>
b.单标签：<标签名 属性名1=属性值1 属性名2=属性值2...> 或者 <标签名 属性名1=属性值1 属性名2=属性值2.../>
说明：
<>,</>：固定写法，html中所有的标签都是写在<>中的
标签名：不是随意命名的，而是一些固定的值，例如：<p></p> - p标签、a标签、b标签、h1标签、input标签、img标签等。
标签名前不能有空隙
属性：属性放在开始标签中，属性名和值之间用=连接，多个属性之间用空格隔开。属性可以是自定义的属性也可以是标签自带的属性
标签内容：双标签才存在标签内容，标签内容可以是任何东西(可以是文字也可以是其他的标签)
例如:<div>我是python</div>， <div><p></p><img></div>
</>: 结束标签，单标签没有一个单独的结束标签
（3）.基本语法
HTML语法中大小写不敏感：html和HTML,HtMl是一样的
文件名命名要求：是由字母和数字组成，但是数字不开头，一般都是小写的。网站首页的html文件命名为index
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习HTML</title>
</head>
body标签中的内容是在网页中可见的部分
html学习目标就是掌握body中的常用标签
<body>
今天开始学习web前端
</body>
</html>
1.文字标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
2.段落标签: p
网页的内容中一个段落文字对应一个p标签
p标签的内容结束后会自动换行
注意：html中的文字是不会因为手动的回车和空格以及缩进产生空白效果(换行、空格、缩进无效)
但是可以通过一些特殊的符号，来产生特定的效果
空格符：
强制换行:<br />
-->
<p>
随着今年苹果秋季发布会的闭幕，从 1（初代 iPhone）到 10（iPhone X），<br />
新 iPhone 的命名即将用尽包括数字 10 以内的所有数字，<br />
对于苹果来说，从明年开始，为新 iPhone 命名将会是一件头疼的事情。2÷10=0.2
</p>
<p>
实际上，去年苹果公司决定用罗马数字 X（读 ten）来命名开始，iPhone 已经步向了「命名荒」，
而进一步加剧这个情况的，则是今年的新 iPhone，由于新 iPhone 并没有巨大的变化，
所以它似乎并不足以获得一个全新的命名，比如说 iPhone Ⅺ （11）这样的称呼。
</p>
-3.文字效果:
a.加粗：b标签，strong标签
b标签：单纯的在样式上进行加粗
strong标签：除了将文字加粗显示外还有强调的意义
b.倾斜：i标签,em标签
em标签有强调的作用
-->
<p>实际上，去年<i>苹果公司</i>决定用罗马数字 X（读 ten）来命名开始，<em>iPhone</em> 已经步向了「<b>命名荒</b>」，
而进一步加剧这个情况的，则是今年的新 iPhone，由于新 iPhone 并没有<strong><em>巨大</em></strong>的变化，
所以它似乎并不足以获得一个全新的命名，比如说 <strong>iPhone Ⅺ</strong> （11）这样的称呼。</p>
4.水平线：hr
单标签
-->
<hr />
列表标签:ul,ol,dl
ul:无序列表
ol:有序列表
dl:自定义列表
-->
<ul>
<li>语文</li>
<p>语文是个什么样的学科。。。。</p>
<li>数学</li>
<li>英语</li>
</ul>
<ol>
<li>北京</li>
<p>北京最大的特点是雾霾~</p>
<li>成都</li>
<p>天府之国</p>
<li>大连</li>
<p>美丽的海滨城市</p>
<li>重庆</li>
<p>辣妹儿+火锅</p>
<li>青岛</li>
</ol>
<dl>
<dt>A</dt>
<dd>and</dd>
<dd>are</dd>
<dt>B</dt>
<dd>big</dd>
<dd>bpdy</dd>
</dl>
</body>
</html>
2.图片和超链接：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片和超链接</title>
</head>
<body>
src属性：图片地址（可以是本地图片地址，也可以是远程服务器上的图片地址）
title属性：设置图片的标题(这个标题是鼠标停留在图片上等一会儿出现的文字)
alt属性：用来设置图片加载失败的时候出现的提示信息
-->
<img id="1" src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
<img id="2" title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<img id="3" src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
<img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<img src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
<img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<img src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
<img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<img src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
<img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<img src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
<img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
2.超链接标签:a标签
想要点击跳转的地方都可以使用超链接语法
注意：a标签的内容部分是可见的，是可以被点击
(1)href属性：跳转目标对应的地址
a.其他的网页地址 ----- 跳转
b.写本地的一个html路径 ------ 跳转
c.空 ------- 刷新当前网页(重新加载)
d.选择器 ------ 让网页跳转到指定的位置
(2)target属性：设置跳转方式
_self(默认值):在当前页中刷新出新的内容
_blank:创建一个新的页面，在新的页面中刷新出href指定的内容
注意：刷新当前网页和在当前网页中跳转到指定位置的时候，只能使用默认的_self
-->
<a target="_blank" href="http://www.baidu.com">百度一下</a>
<a href="http://www.1000phone.com">千锋</a>
<a href="01-文本标签.html">文本标签</a>
<a href="">刷新</a>
<a href="#1">第一张</a>
<a href="#2">第二张</a>
<a href="#3">第三张</a>
</body>
</html>
.3.表格标签;<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
2.属性
a.border属性: 设置表格的边框的宽度（只能作用于table）
b.bordercolor:设置边框颜色 （只能作用于table）
c.background:设置背景图片
d.bgcolor:设置背景颜色(可以作用于table\tr\td)
e.cellspacing:设置单元格与单元格之间的间距（默认是1）
f.cellpadding:设置内容和单元格之间的间距
g.width: 一般作用于某一个单元格，影响的是这个单元格对应的那一列
h.height: 一般作用于行，影响的是一行的高度
i.align：设置对齐方式(可以作用于table\tr\td)
作用于table，让整个表格在浏览器中居中
作用于tr/td，让内容在单元格中居中
-->
<table border="1" bordercolor="red" bgcolor="beige" cellspacing="0" align="center">
<tr bgcolor='coral' height="50" align="center">
<td width="100">姓名</td>
<td width="60">成绩</td>
<td width="140">是否留级</td>
</tr>
<tr height="140">
<td bgcolor="cornflowerblue" align="center">张三</td>
<td>90</td>
<td>否</td>
</tr>
<tr height="80">
<td>李四</td>
<td>80</td>
<td>否</td>
</tr>
</table>
</body>
</html>
4.细线表格：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>细线表格</title>
</head>
<body>
<p>XXX信息表</p>
<table cellspacing="1" bgcolor="purple">
<tr bgcolor="wheat" height="80" align="center">
<td width="120">姓名</td>
<td width="250">毕业院校</td>
</tr>
<tr bgcolor="white" height="100">
<td>余婷</td>
<td>
<img src="img/luffy4.jpg"/>
<a href="http://www.tsinghua.edu.cn/publish/thu2018/index.html">清华大学</a>
</td>
</tr>
<tr bgcolor="white" height="100">
<td></td>
<td></td>
</tr>
<tr bgcolor="white" height="100">
<td></td>
<td></td>
</tr>
<tr bgcolor="white" height="100">
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
5.不规则表格：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
过程：先确定表格中最多多少行，然后再数每一行有多少个单元格。
再确定每个单元格是否有合并现象，如果单元格有行的合并就设置单元格的rowspan属性，
如果有列的合并就设置单元格的colspan的值。
-->
<table bgcolor="black" cellspacing="1" width="600" height="500">
<tr bgcolor="white">
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
网友评论