day75 前端基础

「爱情、让人受尽委屈。」 2023-10-09 11:27 40阅读 0赞

*  前端基础
    
     *  前端要学习的内容
     *  HTML5
     *  HTML5的组成
        
         *  目的
     *  html三大知识点
     *  标签
        
         *  基础
         *  文本标签
         *  功能标签
         *  图片标签
         *  列表标签
         *  表格标签
         *  表单标签
     *  标签功能分类
     *  标签的嵌套规则(重点)
 *  css
    
     *  css导读
     *  css的三种引入方式
        
         *  外部css文件
     *  css基础选择器
     *  补充1：编辑器的作用

# 前端基础 #

*  前端是什么

所有用户能看到的界面:前端 广义上： 网页、pc端的应用exe、移动端应用app、微信小程序、手环的时间界面 狭义上(我们将要学习的): html5为基础的前端：网页、app、微信小程序

## 前端要学习的内容 ##

# 前端三剑客(编程语言) 1、html5：页面结构框架 标签 => 学会标签的嵌套结构 2、css3：页面布局与样式 3、javaScript：页面的交互逻辑 # 工具 jquery：js的工具包 bootstrap：快速搭建页面的框架

## HTML5 ##

*  HTML5(HTML)：超文本标记语言(HyperText Mark-up Language)，5是版本号，之前的版本还有html4和xhtml
    
     *  超文本：除了能够显示文字之外，当我们以html作为载体的时候，还可以承载图片、音频、视频等。
     *  标记语言：没有语法，没有语法逻辑，从上至下进行解释，没有对错，只有认识和不认识，有无效果之分。
 *  html语言开发的文件是以.html为后缀，制作运行在浏览器上展现给用户使用的前端界面。
 *  注：.html文件可以双击直接在浏览器中打开，也就是以浏览器为载体（本身是以文本效果为主的，之所以显示音频视频，是浏览器带有这样的解析功能，才使得超文本的信息可以被解析）

## HTML5的组成 ##

*  转义字符(了解)
 *  指令
 *  标签(重点)

### 目的 ###

*  完成页面架构的搭建，用什么样的标签，完成什么样的标签嵌套关系(难点)

## html三大知识点 ##

指令：<>包裹由!开头 文档类型指令：<!doctype html> 说明他是h5(h4和xhtml更复杂一些，h5对他们兼容) 注释： 转义字符：由 &与;包裹，可以是10进制数字组合，也可以是特殊单词缩写组合(不用记，面向搜索引擎编程) > --> '>' greater than < --> '<' less than   --> ' ' © --> '©' 版权 标签：由<>包裹，字母开头，可以结合数字和合法字符的能被浏览器解析的标记 (字母 数字 '-') 标签有语义：<br> 换行 标签有作用范围(作用域)：<h1>中间就是标签的作用范围，由标签来控制，具有默认样式</h1> 标签可以修改内容样式：<xyz style="color: red">000</xyz> # 注意：html大小写不敏感

## 标签 ##

*  单标签：不需要内容，以功能为主，可以省略结束符`/`
 *  双标签：以内容为主，中间包含着作用域，必须明确结束标签

### 基础 ###

<!DOCTYPE html>  <html lang="zh">  <head>  <meta charset="utf-8">  <title>标签</title>  <style></style>  <script></script> </head>  <body>

*  head和body中页面脚本的区别：
    
    要提前完成的逻辑，就放在head中，依赖页面结构的，放在body中(几乎所有的都在body中)，在body中的脚本也可以写在head中，但是需要声明当所有页面逻辑加载完成后，再加载脚本，所以没必要，直接写在body的最下方就可以了。

### 文本标签 ###

<h1 id="top">一级标题</h1> <h2>二级标题</h2>   <p>段落</p>   <span>span标签</span> <b>加粗标签</b>  <strong>以加粗方式强调的标签</strong> <i>斜体标签</i> <em>以斜体方式强调的标签</em> <sup>上角标</sup> <sub>下角标</sub>

### 功能标签 ###

<br>abc  <hr>   <a href="https://www.baidu.com" target="_blank">前往百度</a>  <a href="第一个页面.html" target="_self">第一个页面</a>  <a href="#top">go top</a>

### 图片标签 ###

<img title= "哈哈哈" src="https://graph.baidu.com/thumb/466383834,495932018.jpg" alt="美女">

### 列表标签 ###

<ul> <li>选择项</li> <li>选择项</li> <li>选择项</li> </ul>  <ol> <li>第1项</li> <li>第2项</li> <li>第3项</li> </ol>

### 表格标签 ###

<table border="1" width="500" height="200" rules="all" cellpadding="10" cellspacing="0"> <caption>表格标题</caption> <thead>  <tr style="height: 80px"> <th>标题</th> <th>标题</th> <th>标题</th> </tr> </thead>  <tbody>    <tr> <td rowspan="2">单元格</td> <td colspan="2">单元格</td>  </tr> <tr>  <td>单元格</td> <td>单元格</td> </tr> </tbody> <tfoot> <tr> <td>表尾表尾</td> <td>表尾表尾</td> <td>表尾表尾</td> </tr> </tfoot> </table>

### 表单标签 ###

<form action=""> <p>      <label for="username">帐号：</label> <input id="username" type="text" name="user" placeholder="请输入帐号"> </p> <p> <label for="password">密码：</label> <input id="passwprd" type="password"> </p> <p>  <input type="hidden" value="123asd{asdf2q1})sdf12" name="pk"> </p> <p>  <input type="file" multiple> </p> <p>  男<input type="radio" name="gender" checked> 女<input type="radio" name="gender"> </p> <p>  男<input type="checkbox" name="like" value="male" > 女<input type="checkbox" name="like" value="female" checked> </p> <p>  <select name="subject" multiple> <option value="python">python</option> <option value="html5">html5</option> <option value="go">go</option> </select> </p> <p>  <textarea cols="30" rows="10"></textarea> </p> <p>  <button type="button">按钮</button> <button type="reset">重置</button> <button type="submit">提交</button> </p> <p>  <input type="submit" value="登录"> </p> </form>  <script></script> </body> </html>

## 标签功能分类 ##

1、是否自带换行 带换行：h1 p div table form tr ul li 不带换行：span i b a img input button label textarea 2、单双标签 单标签（主功能）：br hr input img link 双标签（主内容）：html head body h1 p span div a label button / 代表标签的结尾，但是单标签可以省略 3、简单和组合标签 <!--组合：ul>li table>tr>td|th form>input 常用： h1~h6 p b i a img ul>li table>tr>th|td form>input|button|textarea|select>option span：无语义，高度自定义，不带换行 div：无语义，高度自定义，自带换行

## 标签的嵌套规则(重点) ##

*  当你书写不规范时，比如把内容写在了/body和html中，使用时依然会自动帮你调整到body的最后面，应用场景为你有一些内容必须放在最下面执行，那么这样就很保险
 *  使用div来搭建框架，把代码进行结偶，每一个div就是一块功能，可大可小，看需求

示例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面架构</title> </head> <body>   <div class="header"> <h1> <a href=""></a> </h1> <form action=""> <input type="text"> <button></button> </form> </div>  <ul class="nav"> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </ul>  <div class="main">  <div class="main-left"></div> <div class="main-center"> <div class="main-box box1"> <h2>领先的 Web 技术教程 - 全部免费</h2> <p>在 W3School，你可以找到你所需要的所有的网站建设教程。</p> <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p> <p> <b>从左侧的菜单选择你需要的教程！</b> </p> </div> <div class="main-box box2"> <img src="" alt=""> <div> <h2></h2> <p></p> <p></p> </div> </div> </div> <div class="main-right"></div> </div>  <div class="footer"></div> </body> </html>

# css #

## css导读 ##

1.  css是什么：**级联样式表**（Cascading Style Sheet）
2.  css属于**标记语言**，没有逻辑
3.  css是完成页面 样式(长什么样) 与 布局(标签位置)
4.  学习的内容：
    
     *  css如何控制html标签 - 建立联系 - **css选择器**
     *  css可以控制哪些样式(样式与布局)
     *  css如何导入到html中
5.  学习的目的：
    
     *  完成页面的样式（画出这个标签）
     *  完成页面的布局（并且放到它该出现的位置上）

## css的三种引入方式 ##

*  `.`代表class
 *  `#`代表id
 *  行间式的优先级最高，内联式和外联式如果名字的重复度一样，那么解释型语言的特性，下面的定义覆盖上面，如果重复度不一样，谁的重复度高谁起作用
 *  js控制的样式都是行间式，所以优先级需要多加注意

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>样式</title>    <style> div { width: 50px; height: 50px; } .d1 { background-color: purple; } .dd.d2 { background-color: pink; } .d2 { width: 100px; height: 100px; background-color: yellow; } </style>      <link rel="stylesheet" href="css/样式.css"> </head> <body>     <div style="width: 150px; height: 200px; background-color: deeppink;">123</div> <div class="dd d1"></div> <div class="dd d2"></div> </body> </html>

### 外部css文件 ###

/* css/样式引入.css */ .d1{ width: 250px; height: 250px; background-color: blue; }

## css基础选择器 ##

*  选择器：css与html标签建立起关系的桥梁

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础选择器</title> <style> /*优先级：按作用域大小区分，作用域越小优先级越高*/ /* !important > 行间式 > id > class > 标签 > * /*最重要的是class，因为可以多重命名，还可以相同*/ /*1.通配选择器*/ * { font-size: 30px; color: brown; } /*2.标签选择器*/ div{ color: orange; } span{ color: hotpink; } /*3.类选择器：.类名*/ .aa{ color: blue; } /*4.id选择器: #id名 不可重复，但css和html中没有逻辑，写了也没关系，js中则不一样*/ #bb{ color: red; } /*组合使用: 找一个id为bb，class为aa的div*/ div#bb.aa { color: gray; } /*如果非要超过行间式，可以使用important*/ /*不建议使用，因为js也改不了，js默认是行间式，除非js也加个important*/ .aa{ color: blue!important; } </style> </head> <body> <div class="aa" id="bb" style="color: purple">d1</div> <div class="aa">d2</div> <div>d3</div> <span>s1</span> <span class="aa">s2</span> <span>s3</span> </body> </html>

## 补充1：编辑器的作用 ##

在编写前端代码时，可以巧用编辑器，浏览器的一些功能，让页面写起来更加轻松。如在设置字体大小，样式时，可以使用编辑器的Elements中的styles，预览字体的大小以及样式，再进行修改。

转载于:https://www.cnblogs.com/lucky75/p/11266163.html