文章目录
一、前端编辑器HTML标签页面常用标签架构分析二、CSS选择器css三种引入方式
一、前端
前端概念：广义: 用户能看见并且交互的展示界面狭义: 运行在浏览器上的页面学习的语言：html5 => (h5架构 + css3布局 + javascript逻辑)网页编写 | 移动端应用编写 | 客户端编写前后台分离 开发方式 => 通过接口完成数据交互 => 后台可以千千万，前端就是h5
编辑器
pycharm | sublime | Hbuild | webstrom | atom
HTML
学习html的目的: 完成页面结构的搭建(什么时候用什么标签) html属于标记语言: 标记语言为非编程语言，不具备编程语言具备的程序逻辑 html三大组成：标签：被尖括号包裹，由字母开头包含合法字符的，可以被浏览器解析的标记。eg：系统标签，自定义标签指令：被尖括号包裹，由!开头的标记。eg：<!doctype html>转义字符：被&与;包裹的特殊字母组合或#开头的十进制数。eg：< >
标签
#what标签的概念：被<>包裹由字母开头，可以结合合法字符(-|数字)，能被浏览器解析的特殊符号 #why标签具有特定的功能：换行 | 设置页面字符编码集 | 控制文本字体颜色与大小 | 加载图片与视频注意：标签都有头有尾，用/来标识标签的结束(用来标识尾)
示范：
123<!-- 如果要实现换行 => br标签 --><br>abc<!-- 让呵呵不乱码 => 设置字符编码集 => meta(charset属性) --><meta charset="utf-8"><hehe style="color: chartreuse;font-size: 300px">呵 呵</hehe>< > < >
页面
<!-- 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>
常用标签
学习的目的：使用标签的语义与功能 | 完成页面架构的搭建(p)1.p："三无"，无语义，无功能，无样式，完成页面架构的搭建2.h1：页面总标题，代表页面整体含义，出现一次即可3.列表：ul>li*54.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.最常用的标签--> <!--注：没有语义，也没有特殊共呢，也没有特殊样式 => 搭建构建--> <p></p> <!--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> <p style="height: 2000px"></p> <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><!--分析页面结构 => p完成架构搭建 => 将页面解耦合 => 按区域完成整个页面 --><!--w3c网页--><p class="wrapper"> <!--头--> <p class="header"></p> <!--导航--> <p class="nav"></p> <!--主体--> <p class="main"> <p class="main-left"></p> <p class="main-center"></p> <p class="main-right"></p> </p> <!--底部--> <p class="footer"> <p class="footer-top"></p> <p class="footer-bottom"></p> </p></p><!--总结：考虑两个问题点 1.层级结构嵌套关系(层次) 2.结构的命名--><!--part1--><p> <h2>领先的 Web 技术教程 - 全部免费</h2> <p>在 w3school，你可以找到你所需要的所有的网站建设教程。</p> <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p> <h3>从左侧的菜单选择你需要的教程！</h3></p><!--part2--><p 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></p> <p class="main-right"> <p> <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> </p> <p> <h3>标题 标题 标题</h3> <ur> <li>test test test</li> <li>test test test</li> <li>test test test</li> </ur> </p></p></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.属性与属性之间用;隔开 --> <p style="width: 100px;height: 100px;background-color: yellowgreen"></p> <p style="width: 100px;height: 100px;background-color: yellowgreen"></p> <!--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%;}
以上就上有关前端学习-HTML-CSS的相关介绍，要了解更多php教程_php自学_php视频教程下载 - 绵阳技术博客内容请登录学步园。