CCS学习系列笔记
web学习笔记–css(1)
web学习笔记–css(2)
web学习笔记–css(3)
web学习笔记-html(1)
1.前端概述
关于前端的3种语言：
互联网前三层：
html:从语义的角度描述页面的内容
css：从审美的角度描述页面的样式
js：从交互的角度描述页面的行为（动态交互效果）
一些常用编辑器：
01 webstorm
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。（QA）
02 subline
(效率高)体积小、加载快
03 dreamweaver
04 记事本
2.html概述
html：Hyper text markup language
超 文本 标记 语言；
01文本语言：无法记录内容的样式()
02通过给没有样式的文本加上标签的形式，让文本在网页中显示具体的语义
从语义的角度描述页面内容
3.html基本骨架
<!--文档类型声明：h5-->
<!--注释方法：ctrl+/-->
<!DOCTYPE html>
<!--html文档开始-->
<!--语言：英文-->
<html lang="en">
<!--html头部 用来引入外部文件-->
<head>
<!--meta：元数据-->
<!--charset:字符集 UTF-8 (国际通用字库， 里面包含了所有国家的所有语言)/ GBK / GB2312-->
<!--GBK/GB2312 （国标字库，里面包含了中文和少数外文）-->
<meta charset="UTF-8">
<!--标题标签: 显示在网页的标题栏-->
<title>my first</title>
</head>
<!--body:网页的所有东西-->
<body>
</body>
</html>4. html基本标签
4.1 标题标签 headline 标题
<h>
<h1> ~<h6>
<!--<h1>my first</h1>-->
<!--h1的快捷键：h1 + tab-->
<!--黏贴：ctrl + d-->
<!--6个等级，6个标题-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<!--<h1>：显示标题的语义-->
4.2 段落标签 paragraph
<p>
<p>这里是一段话</p>4.3 图片标签 image
<img>
<!--src:source 资源的意思-->
<!--alt:alternate 替代；代替的意思 (当图片因为某种原因加载失败时出现的文字)-->
<!--title: 图片的解释 or 提示-->
<img src="model.png" alt="图片加载失败"title="sss">
<!--alt：替换文本：由于图片加载失败，显示这个路径问题->
<!--img是由src引入的->
4.4 A标签 锚点标签
<!--a：anchor 锚点标签-，锚链接->
<!--跳转外部页面-->
<a href="http://www.baidu.com"title="search for xxx ">百度</a>
<a href=“name.html"title=“xx”>xx</a>
<!--跳转外部页面—>
<!—href：hypertext reference:-->a标签跳转方式：
(1)不同页面之间的跳转
(2)跳转到外部页面
(3)在页面之间的跳转
1)从底部到顶部
<!--#号键代表占位符-->
<a href="#">去顶部</a>2)去任意一点
<a href="#here">去here</a>
<a name="here">Im here</a>找路径
（1）相对路径
根据其中一个地址的改变，变化另外一个路径
（相对路径的好处：多人共同编写，一个人拷给另一个人，可以自动改变位置）
1）同级：直接写路径，一层一层找
2）从外向内找
3）从内向外 ..
<a href="../h2/demo4.html">我很穷，急需money</a>
<a href="../demo1/demo2.html">赚钱</a>（2）直接路径
4.5 媒体标签 audio
<audio>
<audio src="audio/yintian.mp3" controls autoplay>您的浏览器版本过低 请升级</audio>
<h1>我是标题</h1>
<img src="">
<video src="audio/">您的浏览器版本过低 请升级</video>
<!--控制器：添加控制器之后，才会让音频文件显示-->
<!--autoplay:自动播放-->
<!--loop:循环播放-->4.6 列表标签
列表标签 组标签，不止一个出现（由两个或两个以上标签组成）
（1） 无序列表
无序列表(unordered list) <ul>
列表项 （list item） <li>
<ul>
<li>首页</li>
<li>关于我们</li>
<li>企业简介</li>
<li>作品展示</li>
</ul>
（2） 有序列表
有序列表 (order list) <ol>
ol>li*5 ->再按tab键
<h2>我的博客访问最多文章</h2>
<ol>
<li>排序</li>
<li>列表</li>
<li>树</li>
<li>算法</li>
<li>英语</li>
</ol>（3）自定义列表
(definition list) 定义列表 <dl>
definition title 定义标题 <dt>
definition description 定义描述 <dd>
dd是对dt的解释说明
dd和dt是同级
<dl>
<dt>青岛</dt>
<dd>虾 啤酒</dd>
<dt>新疆</dt>
<dd>手抓羊肉 大盘鸡 饼</dd>
<dt>澳大利亚</dt>
<dd>袋鼠 龙虾</dd>
</dl>
4.7 span和div标签
div: division分割的意思
span：范围的意思
div和span的区别：
a.两者本身都有区域划分的意思，根据语义不具有任何样式产生
b.div在css里面是块级元素 span是行元素
c.div在html里面是容器级，span是文本级元素
容器级标签：里面什么都可以放，包括它自己，可以嵌套 文字、图片、表单，例如：ul li ol li dl dt dd div
文本级标签：里面可以放文字 图片 表单元素，例如：a标签，img，p, span
<div>
今天阳光明媚
</div>
<span>
今天多云
</span>
以下为错误示范：span里面不能嵌套span
<span>
<div></div>
</span>
展示效果如下图：
5. 表单元素
表单：用来收集用户信息，让用户用来填写或选择的。
<form action="#">
<p>
<!--input：表示输入的一个部件-->
<!--type:表示表单类型-->
<!--text：表示文本框-->
用户名：<input type="text" placeholder="请设置用户名">
</p>
<!--用p标签，生成每一行-->
<p>手机号：<input type="tel" placeholder = "请输入手机号"></p>
<p>密码：<input type="password" placeholder = "请输入密码"></p>
<p>性别：
<!--单选按钮-->
<!--name增加元素的互斥性，里面一定要保持一定才可以-->
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex">保密
</p>
<p>
兴趣爱好：
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">打豆豆
</p>
<p>
所在地：
<select>
<option value="">南京</option>
<option value="">上海</option>
<option value="">广西</option>
<option value="">西藏</option>
</select>
</p>
<p>
备注：
<!--cols:列 rows:行-->
<textarea name="" id="" cols="30" rows="10" placeholder="备注"></textarea>
</p>
</form>
6. 表格元素
表格的行 table rows <tr>
表格的列 table data <td> 表数据
```
<!--cellpading:控制文本到内边框之间的距离 padding:页边距-->
<!--cellspacing:内边框到外边框的距离-->
<table border="1" width="80%" align="center" cellspacing="0" cellpadding="30px" bgcolor="#ffe4c4">
<!--caption:标题-->
<caption>
我的课程表
</caption>
<tr align="center" >
<th>时间</th>
<th>课程</th>
<th>老师</th>、
<th>人数</th>
<th rowspan="4" valign="top">备注</th>
</tr>
<tr align="center" bgcolor="#a9a9a9">
<td>9:00</td>
<td>美术</td>
<td>齐白石</td>
<td>20</td>
</tr>
<tr align="center" bgcolor="#f0e68c">
<td>10:00</td>
<td>音乐</td>
<td>周杰伦</td>
<td>100</td>
</tr>
<tr align="center" bgcolor="#7fffd4">
<td>14:00</td>
<td>机器学习</td>
<td>吴恩达</td>
<td>10</td>
</tr>
<tr class="">
<!--colspan合并列，数目包括它自己这一列-->
<td colspan="4" class="ti">人数统计</td>
</tr>
</table>
th:表格内部的标记
7. 字符实体
<!--字符实体，用实际的符号来表示特殊的符号-->
<!--< less than lt <-->
<!--> great than gt >-->
<p>
<!--今天好开心啊，因为我们学了<h1>标签 该句显示有误-->
今天好开心啊，因为我们学了<h1>标签
</p>
<p>
©2018 Baidu 使用百度前必读
</p>
<p>
今天 好开心啊
<!--第一句只空一格-->
</p>
<p>
今天 好开心啊
<!-- non-breaking spacing,空格的意思-->
</p>8. 废弃标签
<font size="30px" color="#7fffd4">我是被废弃掉的标签</font>
<u>给我加下划线</u>
<b>我要加粗</b>
<i>我要倾斜</i>
我要换行</br>
<!--加粗跟强调加粗是不一样的，强调加粗是指我在强调这个，以加粗的方式强调-->
<strong>我是强调加粗</strong>
<em>我是强调倾斜</em>
<del> 我是删除线</del>
<hr>楼上是水平线
8111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
