您的位置：首页 > Web前端 > CSS

前端学习-HTML-CSS

2019-01-15 20:55 639 查看

文章目录

  • 二、CSS

    • 一、前端

    前端概念：
广义: 用户能看见并且交互的展示界面
狭义: 运行在浏览器上的页面

学习的语言：
html5 => (h5架构 + css3布局 + javascript逻辑)
网页编写 | 移动端应用编写 | 客户端编写
前后台分离 开发方式 => 通过接口完成数据交互 => 后台可以千千万，前端就是h5

    编辑器

    pycharm | sublime | Hbuild | webstrom | atom

    HTML

    学习html的目的: 完成页面结构的搭建(什么时候用什么标签)

html属于标记语言: 标记语言为非编程语言，不具备编程语言具备的程序逻辑

html三大组成：
标签：被尖括号包裹，由字母开头包含合法字符的，可以被浏览器解析的标记。eg：系统标签，自定义标签
指令：被尖括号包裹，由!开头的标记。eg：<!doctype html>
转义字符：被&与;包裹的特殊字母组合或#开头的十进制数。eg：&#60; &#62; &nbsp;

    标签

    #what
标签的概念：被<>包裹由字母开头，可以结合合法字符(-|数字)，能被浏览器解析的特殊符号

#why
标签具有特定的功能：换行 | 设置页面字符编码集 | 控制文本字体颜色与大小 | 加载图片与视频

注意：
标签都有头有尾，用/来标识标签的结束(用来标识尾)

    示范：

    123
<!-- 如果要实现换行 => br标签 -->
<br>
abc
<!-- 让呵呵不乱码 => 设置字符编码集 => meta(charset属性) -->
<meta charset="utf-8">
<hehe style="color: chartreuse;font-size: 300px">呵&nbsp;&nbsp;呵</hehe>
&#60; &#62; &lt; &gt;

    页面

    <!-- html的注释：一个html页面有且只有一个页面模板 -->
<html>
<head>
<!-- 字符编码 -->
<meta charset="utf-8">
<!-- 页面标签的标题 -->
<title>页面</title>
<!-- 内部或外部的css样式 | js脚本 | 页面其他设置 -->
</head>
<body>
<!-- 所有页面显示的内容：文本 | 图片 | 视频 | 超链接 | 表格 | 表单 ... -->
<!-- js脚本 -->
</body>
</html>

    示范：

    <!--设置文档类型：html => 该页面采用h5语法标准进行书写 -->
<!--注: 文档类型必须出现在最上方-->
<!--注: html语法不区分大小写 -->
<!--页面内容，都被页面根标签(html)包裹-->
<!doctype html>
<!--页面开始-->
<html>
<!--头：有内容 => 有开始有结束 head-->
<head>
<meta charset="utf-8">
<title>页面</title>
</head>
<!--身体：有内容 => 有开始有结束 body-->
<body>
<!--存放展示给用户的内容-->
呵呵
</body>
<!--页面结束-->
</html>

    常用标签

    学习的目的：使用标签的语义与功能 | 完成页面架构的搭建(div)

1.div："三无"，无语义，无功能，无样式，完成页面架构的搭建

2.h1：页面总标题，代表页面整体含义，出现一次即可

3.列表：ul>li*5

4.p：段落指标

5.img：图片标签，src(数据源)，alt(资源加载失败的文本提示)

6.a：超链接标签，href(超链接地址)，target(跳转方式_self|_blank)

7.常用的文本类标签：span i b

    示范：

    <!DOCTYPE html>
<html>
<head>
<title>常用标签</title>
<meta charset="utf-8">
</head>
<body>
<!--1.标题标签 h1到h6-->
<h1 title="标题">一级标题</h1>
<h3 title="标题">三级标题</h3>
正常文本
<h6>六级标签</h6>

<!--2.段落标签-->
<p>这是段落标签</p>

<!--3.文本相关标签-->
<span>文本标签</span>
<br>
<i>斜体</i> <em>斜体方式强调</em>
<br>
<b>加粗</b> <strong>加粗方式强调</strong>
<br>
<sup>上角标</sup> <sub>下角标</sub>

<!--4.最常用的标签-->
<!--注：没有语义，也没有特殊共呢，也没有特殊样式 => 搭建构建-->
<div></div>

<!--5.超链接标签-->
<!--href: 链接的地址-->
<!--target: 跳转方式_self|_blank -->
<!--title: 鼠标悬浮提示，可以给任意标签添加-->
<a href="https://www.baidu.com" target="_blank" title="鼠标悬浮提示">前往百度</a>
<a href="1.标签.html" target="_blank">标签页面</a>

<!--6.锚点：快速定位到页面指定位置-->
<a name="top" id="top"></a>
<div style="height: 2000px"></div>
<a href="#top">返回Top</a>
<!--总结: 通过a的name或普通标签的id设置锚点，
再通过另一个a的href属性，值为#加锚点名，转跳到设置的锚点位-->

<!--7.图片标签-->
<!--src: 数据源 -->
<!--alt: 资源加载失败的文字提示 -->
<!--width|height: 设置一个，另一个会等比缩放，同时设置很可能导致图片失真-->
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1225352429,1220508458&fm=27&gp=0.jpg"
alt="呵呵二哈"
title="二哈哈"
width="100"
>

<!--8.表格标签-->
<!--
table>(
caption{标题}+
(thead>tr>th{标题}*3)+
(tbody>(tr>td{单元格}*3)*2)+
(tfoot>tr>td{单元格}*3)
)
-->
<!--
border：表格边框宽度
cellspacing：单元格之间的距离
rules：all(全部) | groups(组线) | rows(行线) | cols(列线)
cellpadding：内容距上距左的距离
-->
<table border="10" width="500"
cellspacing="0" rules="all" cellpadding="20">
<caption>表格标题</caption>
<thead>
<tr>
<!--th{标题}*3-->
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<!--(tr>td{单元格}*3)*2-->
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<!--tr>td{单元格}*3-->
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tfoot>
</table>

<!--9.分割线-->
<hr>

<!--10.原文本-->
<pre>
呵    呵
</pre>

<!--11.无序列表 常用-->
<!--ur>li{列表项}*5-->
<ur>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ur>

<!--12.有序列表-->
<!--ol>li{列表项}*5-->
<ol start="10" type="I">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
</body>
</html>

    架构分析

    <!DOCTYPE html>
<html>
<head>
<title>架构分析</title>
<meta charset="utf-8">
</head>
<body>
<!--分析页面结构 => div完成架构搭建 => 将页面解耦合 => 按区域完成整个页面 -->
<!--w3c网页-->
<div class="wrapper">
<!--头-->
<div class="header"></div>
<!--导航-->
<div class="nav"></div>
<!--主体-->
<div class="main">
<div class="main-left"></div>
<div class="main-center"></div>
<div class="main-right"></div>
</div>
<!--底部-->
<div class="footer">
<div class="footer-top"></div>
<div class="footer-bottom"></div>
</div>
</div>
<!--总结：考虑两个问题点 1.层级结构嵌套关系(层次) 2.结构的命名-->

<!--part1-->
<div>
<h2>领先的 Web 技术教程 - 全部免费</h2>
<p>在 w3school，你可以找到你所需要的所有的网站建设教程。</p>
<p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
<h3>从左侧的菜单选择你需要的教程！</h3>
</div>

<!--part2-->
<div class="main-left">
<h3>标题 标题 标题</h3>
<!--ul>li{test test test}*3-->
<ul>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
</ul>
<h3>标题 标题 标题</h3>
<ul>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
</ul>
</div>

<div class="main-right">
<div>
<h3>标题 标题 标题</h3>
<!--ul>li{test test test}*3-->
<ul>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
</ul>
</div>
<div>
<h3>标题 标题 标题</h3>
<ur>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
</ur>
</div>
</div>
</body>
</html>

    二、CSS

    学习CSS的目的：完成页面布局(还原设计稿)

三大组成部分：
1.选择器：由标签、类、id单独或组合出现
2.作用域：一组大括号包含的区域
3.样式块：满足css连接语法的众多样式

    选择器

    what：用来将css与html建立关联的桥梁，称之为css选择器

why: 将原来出现在标签内部的样式分离开来，可以用一个个选择器加以管理，达到页面与样式的解耦合目的，从而提高代码的复用性与开发效率

本质: 就是页面标签的某种名字

    css三种引入方式

    1.行间式
1.写在标签的style属性中
2.属性与属性值间用:赋值
3.属性与属性之间用;隔开

2.内联式
1.写在style标签中(style标签一般出现在head标签中)
2.用选择器与html建立连接
3.样式块书写在作用域内

3.外联式
1.css样式完全与html文件脱离，形成单独的.css文件，样式书写在.css文件中
2.用选择器与html建立连接
3.样式块书写在作用域内
4.要将.css文件与.html文件建立关联  => <link rel="stylesheet" href="css文件的相对路径"

注: 选择器的应用场景在内联式和外联式

总结：
开发：最常用的是外联式，内联与行间辅助样式布局
测试：内联式，可读性最强，且解耦有复用性
行间的应用场景：最简单粗暴，js操作的样式都是行间式

    示范：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>样式导入</title>
<style>
/*css注释: 书写在style标签内部的要采用css语法*/

/*
p：选择器
{}：作用域
宽高背景颜色：样式块
*/
p {
width: 150px;
height: 150px;
background-color: yellow;
}
h2 {
width: 50px;
height: 150px;
background-color: red;
}
</style>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<!--1.行间式-->
<!--
1.写在标签的style属性中
2.属性与属性值间用:赋值
3.属性与属性之间用;隔开
-->
<div style="width: 100px;height: 100px;background-color: yellowgreen"></div>
<div style="width: 100px;height: 100px;background-color: yellowgreen"></div>

<!--2.内联式-->
<!--
1.写在style标签中(style标签一般出现在head标签中)
2.用选择器与html建立连接
3.样式块书写在作用域内
-->
<p></p>
<p></p>
<h2></h2>
<h2></h2>

<!--3.外联式-->
<!--
1.css样式完全与html文件脱离，形成单独的.css文件，样式书写在.css文件中
2.用选择器与html建立连接
3.样式块书写在作用域内
4.要将.css文件与.html文件建立关联  => <link rel="stylesheet" href="css文件的相对路径"
-->
<h3></h3>
<h3></h3>
</body>
</html>
==============================test.css================================
/*书写语法与内联式一致:

选择器 {
样式块;
}

*/
h3 {
width: 80px;
height: 80px;
background-color: darkgreen;
border-radius: 50%;
}
    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航