编辑器
pycharm|sublime|Hbuild|webstrom|atom
前端
前端概念
广义:用户能看见并且交互的展示界面
狭义:运行在浏览器上的页面
html5 =>(h5架构+css3布局+javascript逻辑)
网页编写|移动端应用编写|(客户端编写)
前后台分离
脚本就是源代码的基础上加上功能.就是在源代码中嵌入一段代码程序块
HTML:标记语言
不具备程序逻辑
使用目的:完成页面结构的构建
三大组成:
标签:被尖括号包裹
指令:
转义字符:
注释:浏览器会将所有的空白符(空格,制表符,回车)都解析为一个空格
如果要换行br标签 添加<br>
统一编码:<meta charset="utf-8">
style="color:#092ff25"
<!----> html的注释符号
语义给浏览器看的
标签:
标签:被<>包裹的由字母开头,可以结合合法字符(-|数字),能被浏览器解析的特殊符号
特定的功能:换行|设置页面字符编码集|控制文本字体颜色与大小|加载图片
页面
<!-- 页面模板: 一个html文件中有且只有一个页面模板 -->
<!-- 设置文档类型 : html===> 该页面采用h5 语法标准进行书写-->
<!doctype html>
指令由<>包裹,!开头的标记(两个):文档类型|注释
注:文档类型必须出现在最上方,html语法不区分大小写
页面内容都被页面根标签包裹
页面模板:
<html> <!-- 页面开始 -->
<head> 头:有内容 =>有开始有结束
字符编码
<meta charset="utf-8">
<tiltle>页面</title> 页面标签的标题
内部或外部的css样式|js脚本|页面其他设置
</head>
<body> 身体:有内容 =>有开始有结束 存放展示给用户的内容
文本.图片.超链接.表格.表单.js脚本
</body>
</html>
常用标签
<h1>一级标题<h1> 一个页面都会出现,有但只有一个用来标识整个页面的标题
<h3>三级标题<h3>
正常文本
<h6>六级标题<h6>
注:学习标签的目的,使用标签的语义,功能.
<p></p> 一个段落
文本相关标签
<span>文本标签</span>
<i>斜体</i><em>斜体方式强调</em>
<b>加粗</b><strong>加粗强调</strong>
<sup>上角标</sup><sub>下角标</sub>
<div></div> 没有语义,也没有特殊功能,也没有特殊样式===>可以随意用,可以用来搭建架构 自带换行
a标签:超链接标签
<a href="">超链接</a> href:链接的地址
target:_self|_blank 转跳方式自己跳转|新窗口打开跳转
title : 鼠标悬浮提示可以给任意标签添加
<a href="https://www.baidu.com" target="_blank" title="鼠标悬浮提示">前往百度</a>
锚点:快速定位到页面指定位置
<a name="top" id="top"></a> a标签用name 其他标签用id
<div style="height:2000px"></div> 设置2000像素的内容 滚动
<a href="#top">返回top</a>
总结:通过a的name或者普通标签的id设置锚点,再通过另外一个a的href属性,值为#加锚点名.跳转到设置的锚点位.
图片标签:img
src:数据源
alt:资源加载失败的文字提示
width|height:设置一个另外个和一起变动
<img src="数据源地址 "
alt=''哈哈"
title="二哈"
width="100">
border:表格边框
cellspacing:单元格之间距离
rules: all(全部)| groups(组线)|rows(行线)|cols(列线)
cellpadding:内容距上距左的距离
<table border="10" width="300" height="400" cellspacing="0" rules="all" cellpadding="20">
<caption>表格标题</caption>
<thead>
<tr>
th{标题}*3
</tr>
<tbody>
<tr>
td{单元格}*3
</tr>
<tr>
td{单元格}*3
</tr>
<tfoot>
<tr>
td{单元格}*3
</tr>
</table>
<hr> 添加一条分割线
<pre>呵 呵</pre> 原文本
列表:ul>li{列表项}*5 无序的列表
ol>li{列表项}*5 有序的列表
css:样式层级表
学习css目的:完成页面布局(还原设计稿)
三大组成部分
选择器:由标签.类.id单独或者组合出现
作用域:一组大括号包含的区域
样式块:满足css连接语法的众多样式
选择器:
用来将css与html建立关联的桥梁.
将原来出现在标签内部的样式分离开来,可以用一个个选择器加以管理,达到页面也样式的解耦合目的,从而提高代码的复用性与开发效率
css三种引入方式
1.行间式
2.内联式
3.外联式
注:选择器的应用场景在内联式和外联式
总结:
开发: 最常用的是外联式, 内联与行间辅助样式布局
测试: 内联式, 可读性最强, 且解耦有复用性
行间的应用场景: 最简单粗暴, js操作的样式都是行间式
<style>
/* css注释:书写在style标签内部的要采用css语法 */
/*
p:选择器
{}:作用域
宽高背景颜色:样式块
*/
p{
200px;
height: 200px;
background-color: purple;
}
h2{
100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<!--1.行间式-->
<!--
1.写在标签的style属性中,(style标签一般出现在head中)
2.属性与属性之间用;隔开
3属性与属性值之间用:赋值
-->
<div style="150px;height:150px;background-color: magenta"></div>
<div style="150px;height:150px;background-color: magenta"></div>
<!--2.内联式-->
<!--
1.写在style标签中
2.用选择器与html建立连接
3.样式块书写在作用域内
-->
<p></p>
<h2></h2>
<!--3.外联式-->
<!--
1.css样式完全与html文件脱离,形成单独的.css文件.样式写在.css文件中
2.用选择器与html建立连接
3.样式块写在作用域里面
4.将.css文件与.html文件建立关联
-->
<h3></h3>
<!--注:用link标签将css文件与html文件建立连接
<link rel="stylesheet" href="css文件的相对路径"
-->
<link rel="stylesheet" href="css/h3样式.css">
</body>
</html>