前端html css
编辑器
pycharm|sublime|Hbuild|webstrom|atomjavascript
前端
前端概念css
广义:用户能看见而且交互的展现界面html
狭义:运行在浏览器上的页面前端
html5 =>(h5架构+css3布局+javascript逻辑)html5
网页编写|移动端应用编写|(客户端编写)java
先后台分离css3
脚本就是源代码的基础上加上功能.就是在源代码中嵌入一段代码程序块web
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{ width:200px; height: 200px; background-color: purple; } h2{ width:100px; height: 100px; background-color: aqua; } </style></head><body> <!--1.行间式--> <!-- 1.写在标签的style属性中,(style标签通常出如今head中) 2.属性与属性之间用;隔开 3属性与属性值之间用:赋值 --> <div style="width:150px;height:150px;background-color: magenta"></div> <div style="width: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>
- 1. 前端-html、css
- 2. 前端-html/css
- 3. 前端 html css
- 4. 前端html css
- 5. 前端HTML & CSS
- 6. python-前端-html&css
- 7. 前端之HTML&CSS
- 8. 前端 | 1. HTML&CSS
- 9. 前端HTML、JS、CSS
- 10. 前端----HTML/CSS 单边框
- 更多相关文章...
- • CSS 指南 - 网站建设指南
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Docker容器实战(一) - 封神Server端技术
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端-html、css
- 2. 前端-html/css
- 3. 前端 html css
- 4. 前端html css
- 5. 前端HTML & CSS
- 6. python-前端-html&css
- 7. 前端之HTML&CSS
- 8. 前端 | 1. HTML&CSS
- 9. 前端HTML、JS、CSS
- 10. 前端----HTML/CSS 单边框