认识web前端
<!--
1.web标准
web标准是万维网指定的网页开发标准，主要包含三类:
结构标准 - html(决定网页中的内容)
表现标准 - CSS(决定网页中内容的布局和样式)
行为标准 - javascript(决定网页内容动态变化)
2.认识html
html又叫超文本标记语言(和markdown一样)
一个网页本质就是一个html文件
3.html文件基本结构
一个html标签中有一个head标签和一个body标签
4.html基本语法
1)语法
双标签: <标签名 属性1=值1 属性2=值2 ...>标签内容</标签名>
单标签: <标签名 属性1=值1 属性2=值2 ...> 或者 <标签名 属性1=值1 属性2=值2 .../>
2)说明
<>和/ - 都是固定写法
标签名 - 只能写html相应版本提供的标签的标签名；什么标签是什么类型是确定的！
注意：标签名前不能出现空格
属性 - 属性是以'属性名=值'的形式出现，多个属性之间用空格隔开；
属性的顺序不影响结果; 不管是什么属性的值，值必须用双引号引起来
标签内容 - 任何内容都可以作为标签内容;例如: 文字、标签、文字和标签的组合
注意: html中大小写不敏感
-->
<!--DOCTYPE说明html版本
html - html5
-->
<!DOCTYPE HTML>
<!--<!docttype html>-->
<!--<!docttype HtMl>-->
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">-->
<!--网页基本结构
一个html代表整个网页; html标签中有一个head标签和一个body标签
-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img src=""/>
</body>
</html>
1.head标签
<!DOCTYPE html>
<html>
<!--
1.head的作用
head标签主要负责网页图标和标题的显示以及网页的基本设置
2.head标签中的标签
head可以写的标签有: meta、title、link、style、script、base
meta - 设置网页元数据（例如：网页的编码方式、网页的搜索关键字、网页介绍等）
title - 设置网页标题
link - 导入文件(设置网页图标、导入外部样式表)
-->
<head>
<!--设置文本编码方式-->
<meta charset="UTF-8">
<!--设置网页标题-->
<title>head标签</title>
<!--设置网页图标
rel属性 - 设置被导入的文件的作用;
stylesheet - 样式表
icon - 网页图标
type属性 - 设置文件类型: 文件类型/文件后缀
` text/css - 导入的文件是：后缀是.css的文本文件
image/png - 导入的文件是图片，图片后缀是.png
href属性 - 被导入的文件路径
-->
<link rel="icon" type="image/ico" href="img/aaa.ico"/>
</head>
<body>
<script type="text/javascript">
console.log(19+'abd')
</script>
</body>
</html>
2.文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.标题标签: h1 ~ h6
如果文字的意义是标题的时候才选择标题标签
-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<!--<h7>我不是标题</h7>-->
<!--2.段落标签: p
一个段落就是一个p标签(多个p标签的内容之间会自动换行)
-->
<p> 首先，买菜真的不算是一个赚钱的生意。相信所有买过菜的人都知道，在中国买菜似乎真的不算是个赚钱的生意，
因为生鲜蔬菜这些的损耗率极大，本身每客的单价都很低，在各大互联网巨头加入之前的那些生鲜玩家们，
基本上没有谁能够真正实现盈利的，即使是里面做的最好的每日优鲜，其实也并没有实现全面的盈利，
仅仅在一线城市实现盈利，其他城市依然处于亏损的状态。这也就不难理解为啥呆萝卜之类的生鲜企业会处
于那么艰难的地步了，毕竟不赚钱，艰难也是很正常的事情。
</p>
<p>
其次，为啥巨头们却那么热衷买菜？既然买菜是一个不怎么赚钱的生意的，但是为啥几乎所有互联网巨头都不约而
同的盯上了买菜这个市场呢？原因就在于对于互联网企业来说，经过了长期的发展，各自在各自的领域市场上都已经
实现了流量的绝对优势，在这种绝对优势的情况下，其实谁也不能把谁怎么样？举例来说，阿里巴巴的电商市场地位
自然不容小觑，腾讯的社交领域市场也无可撼动，美团在生活市场上可谓是无可匹敌，京东在B2C电商上也占据绝对
优势，所以在各自市场上流量其实都已经有一种流量殆尽的感觉，所以如果有一个市场场景既是大家每天生活必不可
少的，又没有太大的巨头垄断的话，必然会成为流量殆尽时代的一种抢夺对象，而买菜无疑就是这样的场景，易观
一份研究报告数据曾显示，虽然比例不断增加，生鲜市场2017年线上市场渗透率仅7.9%。
</p>
<!--3.普通文字标签: font
多个font标签的文字可以在一行显示
-->
<font>发布时间</font> <br /><br /><br />
<font>文章作者</font>
<!--4.空格和换行
网页内容中手动输入的空格和换行都没有用
1)换行标签: br
在网页中的任何位置需要换行的时候直接加<br>或者<br/>
2)空格: 空格符号
- 一个空格(单位是像素)
  - 一个空格(单位是空格键)
-->
<hr />
<p>
床前明月光,<br />
疑是地上霜;<br />
    举头望明月,<br />
低头思故乡。<br />
</p>
<!--4.文字效果: 倾斜、加粗
1)加粗：<b></b>、 <strong></strong> - strong有强调的意思
2)倾斜: <i></i>、 <em></em> - em有强调的意思
-->
<p><strong>昨天</strong>我在发了一篇文章<b>《搞懂淘宝运营的“道”与“ 法”，跳出淘宝看淘宝》</b>，于是乎一时间各种评论出现……
对于反对者，我特别能理解，在这个<i>焦虑的社会</i>，哪种办法能赚钱，狠不得马上套用过来变现，
但是你终会发现：即使你推一个爆款上去了，你也会很快就掉下来，<strong><em>赚的钱还要吐出来</em></strong>。</p>
<!--5.水平线: hr-->
<hr />
</body>
</html>
3.列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--1.无序列表: ul-li
ul标签 - 表示整个列表容器
li标签 - 表示列表中的元素
-->
<ul>
<li>Python</li>
<p>Python是最有前途的学科</p>
<li>Java</li>
<li>H5</li>
<li>测试</li>
<li>Go语言</li>
<li>物联网</li>
</ul>
<!--2.有序列表: ol-li
ol标签 - 表示整个列表容器
li标签 - 表示列表中的元素
-->
<ol>
<li>将肉洗干净，然加水到8分熟</li>
<li>捞起来切片</li>
<li>油锅里面放油，然后再放干海椒、花椒、生姜。炸香</li>
<li>再将肉放进去炸</li>
<li>起锅前放盐和白糖</li>
</ol>
<!--3.自定义列表: dl-dt-dd
dl - 表示整个列表容器
dt - 表示一个分组
dd - 每个分组中的内容
-->
<dl>
<dt>文科</dt>
<dd>历史</dd>
<dd>地理</dd>
<dd>政治</dd>
<dt>理科</dt>
<dd>物理</dd>
<dd>化学</dd>
<dd>生物</dd>
</dl>
</body>
</html>
4.图片和超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片和超链接</title>
</head>
<body>
<!--1.图片标签: img
1)src属性: 图片路径
本地文件路径（绝对路径/相对路径）
网络图片路径
2)title属性: 图片标题(鼠标悬停在图片上等一会儿才会出现)
3)alt属性: 图片加载失败的提示信息(图片加载失败的时候才会显示)
-->
<!--显示本地图片-->
<img src="img/luffy.jpg" />
<br />
<!--显示网络图片-->
<img src="https://www.baidu.com/img/bd_logo1.png"/>
<img src="img/hat3.png" title="帽子" alt="帽子加载失败"/>
<!--2.超链接: a
<a href="跳转目的地">可见可点击的部分</a> == []()
1)href属性 - 跳转的目的地
a.网页地址 - 跳转到指定网页
b.本地html文件地址 - 在浏览器中直接打开指定html文件对应的网页
c.选择器 - 将当前页面滚动到选择器所在的位置
d.# - 刷新页面
2)target属性 - 页面打开方式
a._self - 默认值，在当前页面中渲染出新的页面
b._blank - 不动原页面，在新的窗口中渲染新的页面
-->
<!--文字超链接-->
<br />
<a href="https://www.baidu.com" target="_blank">百度</a>
<!--图片超链接-->
<br />
<a href="https://www.baidu.com"><img src="img/aaa.ico"/></a>
<a href="03-列表标签.html">列表</a>
<hr id="top"/>
<a href="#page1">第一章</a>
<a href="#page2">第二章</a>
<a href="#page3">第三章</a>
<a href="#">刷新</a>
<h1 id="page1">第一章</h1>
<img src="img/img1.jpg"/>
<h1 id="page2">第二章</h1>
<img src="img/img2.jpeg"/>
<h1 id="page3">第三章</h1>
<img src="img/img3.jpg"/>
<hr />
<a href="#top">回到顶部</a>
</body>
</html>
5.表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.表格标签: table-tr-td
1)table标签 - 代表整个表格
border属性 - 设置表框线的宽度
bordercolor属性 - 边框线的颜色; 颜色单词或者#16进制颜色值
cellspacing属性 - 设置单元格与单元格以及单元格和表格之间的间隙, 默认1
bgcolor属性 - 设置整个表格的背景颜色
width属性 - 设置整个表格的宽度
height属性 - 设置整个表格的高度
align属性 - 设置整个表格在网页中的对齐方式: center, left(默认), right
cellpadding属性 - 设置整个表格中所有单元格中的内容到边框的距离
2)tr标签 - 一个tr代表一行
bgcolor属性 - 设置一行的背景颜色
height属性 - 设置指定行的高度
align属性 - 设置指定行中所有的单元格中的内容在单元格中的对齐方式
cellpadding属性 - 设置整行中所有单元格中的内容到边框的距离
3)td标签 - 一个td代表一个单元格
bgcolor属性 - 设置指定单元格的背景颜色
width属性 - 设置指定单元格所在的列的宽度
align属性 - 设置指定单元格中的内容在单元格中的对齐方式
cellpadding属性 - 设置指定单元格中的内容到边框的距离
-->
<table cellpadding="20" align="center" width="600" height="400" border="1" cellspacing="0" bordercolor="#fdb335" bgcolor="yellowgreen">
<tr bgcolor="purple" height="60" align="center">
<td>Python表达式</td>
<td>结果</td>
<td>描述</td>
</tr>
<tr>
<td width="150" align="right">2行1列</td>
<td>2行2列</td>
<td>2行3列</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td bgcolor="aquamarine">9</td>
</tr>
</table>
<!--练习: 写一个3*3的细线表格-->
<br />
<table width="600" height="400" bgcolor="black" cellspacing="1">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
6.input标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.表单标签: form
表单标签是专门用来做用户信息收集的标签；是一个容器型的标签，单独用没有意义，一般需要配合表单相关标签来使用。
主要完成数据的提交和重置的功能
表单相关标签: input、textarea、select
action属性 - 数据提交的方法/接口
method属性 - http请求方式(接口类型)
-->
<form action="" method="get">
</form>
<form action="" method="get">
<!--2.input标签
type属性 - 决定标签的作用
-->
<!--1)text - 普通文本输入框
name属性 - 用来分区和提交数据的
value属性 - 输入框中的内容
placeholder属性 - 占位符(输入提示信息)
maxlength属性 - 限制输入框内容的长度
-->
<font>用户名:</font><input type="text" name="userName" id="" value="张三" placeholder="请输入用户名" maxlength="8"/>
<br /><br />
<font>电话:</font><input type="text" name="tel" id="" value="" placeholder="请输入手机号" />
<!--2)password - 密码输入框
name属性 - 用来分区和提交数据的
value属性 - 输入框中的内容
placeholder属性 - 占位符(输入提示信息)
maxlength属性 - 限制输入框内容的长度
-->
<br /><br />
<font>密码:</font><input type="password" name="" id="" value="123456" placeholder="密码6~12位" />
<!--3)radio - 单选按钮
name属性 - 用来分区和提交数据的（注意: 同一组选项的name属性必须一致）
value属性 - 标签点当前按钮选中的数据的值（不可见）
checked属性 - 设置为"checked", 对应的按钮会被默认选中
-->
<br /><br />
<!--让label标签的for属性和表单标签的id属性保持一致，可以让label和表单标签进行关联-->
<input type="radio" name="gender" id="1" value="男" checked="checked"/><label for="1">男</label>
<input type="radio" name="gender" id="2" value="女" /><label for="2">女</label>
<!--4)checkbox - 复选按钮
name属性 - 用来分区和提交数据的（注意: 同一组选项的name属性必须一致）
value属性 - 标签点当前按钮选中的数据的值（不可见）
checked属性 - 设置为"checked", 对应的按钮会被默认选中
-->
<br /><br />
<input type="checkbox" name="interest" id="b1" value="篮球" /><label for="b1">篮球</label>
<input type="checkbox" name="interest" id="b2" value="唱" /><label for="b2">唱</label>
<input type="checkbox" name="interest" id="b3" value="跳" /><label for="b3">跳</label>
<input type="checkbox" name="interest" id="b4" value="rap" checked="checked"/><label for="b4">rap</label>
<!--5)button - 普通按钮
value属性 - 按钮上可见的文字
disabled属性 - 设置为'disabled',是禁用
-->
<br /><br />
<input type="button" name="" id="" value="确定" />
<!--button标签-->
<button>确定</button>
<button><img src="img/aaa.ico"/></button>
<!--6)submit - 提交按钮
将当前form标签中所有设置name属性值的相关的标签，以'name=value'的进行对数据进行提交
-->
<input type="submit" name="" id="" value="提交" />
<!--7)reset - 重置按钮
将当前form标签中所有相关标签的状态恢复到初始状态
-->
<input type="reset" name="" id="" value="重置" />
</form>
</body>
</html>
7.多行文本域和下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.多行文本域:textarea
name属性 - 区分和提交数据
rows属性 - 行数,控制输入框的高度
cols属性 - 列表, 控制输入框的宽度
placeholder属性 - 提示信息
-->
<textarea name="" rows="4" cols="100" placeholder="请输入意见..." maxlength="200"></textarea>
<!--2.下拉菜单:select-option
select标签 - 整个下拉列表
option标签 - 下拉列表中的选项
selected属性 - 值设置为"selected", 让指定选项处于默认选中状态
-->
<br />
<select name="city">
<option value="成都">成都市</option>
<option value="重庆">重庆市</option>
<option value="贵阳">贵阳市</option>
<option value="三河">三河</option>
<option selected="selected" value="北京">北京市</option>
</select>
<select name="">
<!--可以通过添加optgroup标签并且设置label属性来对同一个下拉列表中的选项进行分组-->
<optgroup label="成都市"></optgroup>
<option value="">武侯区</option>
<option value="">成华区</option>
<option value="">青羊区</option>
<option value="">金牛区</option>
<option value="">高新区</option>
<optgroup label="北京市"></optgroup>
<option value="">海淀区</option>
<option value="">朝阳区</option>
<option value="">丰台区</option>
</select>
</body>
</html>
8.div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div和span都是无语义标签， 主要是用来对网页中的内容进行分块和分组的;
div默认是块级标签，显示的时候只能一个占行
span默认是行内标签，显示的时候一行可显示多个
-->
<div id="">
div标签
</div>
<!--<span id="">
<p>
HTML maxlength 属性 HTML 标签
</p>
</span>
<span id="">
<p>HTML disabled 属性 HTML 标签 实例 </p>
</span>-->
<div id="">
<font>你好</font>
<a href="">百度</a>
</div>
<div id="">
<font>hello</font>
</div>
</body>
</html>
