前端
广义前端概念，客户端上运行
狭义前端概念，浏览器上运行
通过HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动态效果设计，给用户带来极高的用户体验。
前端急速分为前端设计与前端开发，前端设计是网站的视觉设计，前端开发是网站的前台代码实现
JavaScript是前端写的最多的
前端开发的技术栈
HTML:
将文字放在标签内
超文本的标记语言,超文本是除了文本外还有图片音频视频等
HTML页面
每次更新都是添加新的内容
HTML脚本的扩展名是.htm
CSS:
页面的美化样式
JavaScript:
前端核心,与python编程语言相同地位,直接在浏览器上运行使用
作为页面有交互,把一些数据渲染到页面的每个角落
兼容性:
IE9以上才兼容,win7以下的最高就IE8
360是核浏览器,用的是IE内核,两内核也是一次用一个,不能同时用
前端是W3C组织维护,万维网联盟
最开始要制定文档声明
<!--HTM结构-->
<!doctype html>
<html>
<head>
<meta name=”keywords” content=”关键字”>
<meta name=”description” content=”关键词”>
</head><!--身体,head里面是页面的描述-->
<body>
<!--注释: 标题-->
<!--
都是注释方式
-->
<h1>同志</h1>
<p>
我今天学习标签
<！--<h1>没法把标签直接输出,这里的内容会变大,因为被解析了</h1> 但是用 <h1> 会有,<；是小于与>大于的意思-->
</p>
<p>
<!--©-->是©备案号的特殊字符
</p>
<p>
人民币符号¥<!--¥-->
</p>
<p>
标识空格的实体:<!-- -->
</p>
</body>
</html>#成对的头
HTML
1HTML基本语法
html标签
-
单标签
<img />、<img>img为图片标签，通常后面的/是省略的在<!--<img src="./相对路径">--> -
双标签
<html> </html>中间可以写内容
属性 属于标签
<img src="图片地址"><!--本地地址要写相对地址-->
<table width="100" height="200"></table><!--table表格制作，单双引号或者不写都行，不写引号的话会对后面有影响，写引号是为了表明一个值-->
语法规范
-
标签嵌套 用缩进 公司有的会有规范4个空格或者Tab，如果写上标签名直接按Tab会直接补全需求
-
标签名 不区分大小写 建议小写 官方建议小写的语法规范
-
属性名 不区分大小写 建议小写
注释
<!--注释：单行-->
<!--
多行注释一样的方式
-->
常用HTML实体
-
空格 -
<< -
>> -
&& -
©版块 -
¥人民币不管两个值相差多少空格，显示出来的只有一个，但是可以通过<!-- -->来增加空格距离
2HTML常用标签
主体结构
-
<html></html> -
<head></head> -
<body></body>
HEAD标签
<meat charset="utf-8">指定编码模式
-
<title></title>整个网站标题，标签是为了让搜索引擎的查找 -
<meta>单标签作用指定网页的原信息，指定关键字，指定描述，指定字符集 属性：charset、name、content (seo搜索引擎优化) -
<style></style>直接写入css内容 -
<style type="text/css">
h1{
css内容
}<link>导入css或者指定网页图标属性:src、rel="stylesheet"、type=“text/css”、 href="./相对导入css"
rel="shortcut icpn"、type="image/x-ion"、href=".ico结尾的图标" 网页上的标签图标
-
<script></stript>导入javascript
格式排版标签
-
<hn></hn>1~6 标题标签，最多<h6>,<h7>出现就是默认为乱写，从<h1>开始是一级标签<h6>为6级标签 -
<p></p>段落 -
<pre></pre>pre内的内容是同步原样输出 -
<br></br>换行 -
<hr></hr>分割 -
<div></div>不通过css样式设置就没有作用
文本标签
-
<em></em>强调 表现为斜体，本质不在于斜体，而是为了强调让搜索引擎看到关键字 -
<strong></strong>强调 表现为加粗，本质不在于加粗，而是为了强调让搜索引擎看到关键字 -
<mark></mark>在H5时新增内容，表示被选择，在I8以及之前浏览器无法使用 -
<sup></sup>上标，在内容里缩小标记在上面 -
<sub></sub>下标，在内容里缩小标记在下面 -
<ins></ins>是添加的内容 语义 -
<del></del>是删除的内容 字中间一条横线滑过 语义 -
<ruby> <rt></rt></ruby><ruby>后面是跟文字，<rt>后面是拼音达到加拼音效果，拼音上，文字下H5新增内容
目前最新版本是css.3
使用CSS
三种方式：
-
link 引入外部的CSS文件
-
<style></style>在html中写 -
html元素的style属性
格式
选择器｛
CSS属性：值；
CSS属性：值；
｝
选择器｛属性：值；属性：值；｝
注释
/* */
CSS长度单位
字体大小，浏览器默认是16像素
px 像素
em 默认大小的倍数
百分比 默认大小参照
cm
mm
pt
width 宽高
height 长度
border 虚线框
solid 实线框
颜色单位
R红 G蓝 B绿
colorName： red/green/bue/purple/orange/yellow/pink/skyblue
rgb数字 background-color:rgb(100,200,50);背景颜色 background-color:rgb(20%,57%,100%)
16进制 gackground-color：#abcdef； #f90 #ccc 三个相同的是灰色，000是黑色，256，256，256白色
CSS选择器
标签名选择器，所有的标签都会选中
tagName{
}
类名
class类属性 名字是可以相同的
class可以多加一个值，只要在前一个值后面空格再加入，其他的不能这样操作
条件一样的情况下后面属性会覆盖前面的属性，如果是有优先级别的，那么是以优先的为主
.className{
}
ID选择器 所有内容都有自己的id，也可以自己手写id
idName{
}
全局选择器
*的优先级是最低，但是所有的元素都会受到影响
*｛
｝
组合 后代元素
选择器 选择器
组合 子元素
选择器>选择器
群组 h1,hr,p,.item{}通通都选上
选择器，选择器，选择器
多条件
p.item
CSS选择器优先级
选择器优先级别
ID>CLASS>tagName>*
组合选择器 数数，个数
CSS属性 常用
字体
非衬线字体：没有棱角的字体，黑体，思源
衬线字体：有棱角的字体，宋体，仿宋
-
font-family: ;默认是微软雅黑 直接写“宋体“就是现实宋体，非衬线：sans-serif，衬体：serify
-
font-size:30px;字体大小
-
font-weight:bold/normal；加粗
-
font-style:italic/normal;字体变斜
-
font-variant:small-caps/normal;小写字母变大写字母
-
font: ;复合属性，将上面的类型最少放入2种
font:加粗 大写 字体大小 字体类型
颜色
-
color
文本
-
word-spacing
-
letter-spacing
-
text-align:left;左对齐
center; 居中
right；右对齐
-
text-decoration:underline;下划线
onverline;上划线
line-through;删除线
nine;消除线，常用
-
vertical-align:middle; 文字在顶线与基线之间，图片跟文字一起用的时候
baseline;
-
line-height: ; 行高
-
text-indent:2em;首行缩进 2em是两个字间距
-
word-wrap:break-word;允许长单词在一行内换行
-
overflow-wrap 是word-wrap的别名
-
white-space:pre;缩进换行作用
pre-wrap；保存格式并自动换行
nowrap; 强制内容在一行显示
pre-line;保障pre里面的换行，不保证缩进
