前端之html、css

时间：2023-03-10 02:28:41
前端之html、css

一.什么是前端

前端即网站前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript。

广义前端：用户可以直接看见并交互的界面

狭义前端：浏览器上运行的用户交互界面

二.前端三剑客

HTML：超文本标记语言 Hyper Text Markup Language，负责完成页面的结构（架构）。

CSS：级联样式表（标记语言）Cascading Style Sheet，负责页面的风格设计（布局）。

JavaScript：浏览器脚本语言，负责编写页面特效，从后端获取数据，调用浏览器的API，渲染页面等（逻辑）。

1.HTML：超文本标记语言

什么是html？

html指的是超文本标记语言，非编程语言，不具备编程语言所具备的程序逻辑

为什么学html？

为了完成页面结构的搭建（什么时候用什么标签）

'''

标签：被尖括号（<>）包裹，由字母开头包含合法字符（- | 数字）的，可以被浏览器解析的标记。如：系统标签，自定义标签

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

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

<meta charset="utf-8">

指令：被尖括号（<>）包裹，由字！开头的标记。如：<!doctype html>, <!-- -->(注释)

转义字符：被&与；包裹的特殊字母组合或#开头的十进制数。如：< > &nbsp;

'''

页面

<!-- html的注释：一个html页面有且只有一个页面模板 -->

<!--设置文档类型：html => 该页面采用h5语法标准进行书写>

<!doctype html> # 文档类型必须出现在最上方，html语法不区分大小写

<!--页面内容都被页面根标签（html）包裹-->

<!--页面开始-->

<html>

<!--头：有内容 => 有开始有结束 head -->

<head>

    <meta charset='utf-8'> # 字符编码

    <title>页面</title> # 页面标签的标题
    <!--内部或外部的css样式|js脚本|页面其他设置-->

</head>

<!--身体：有内容 => 有开始有结束 body -->

<body>

    <!--存放展示给用户的内容：文本|图片|视频|超链接|表格|表单。。。-->

    呵呵

</body>

<!--页面结束>

</html>

常用标签

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

# 1.标题标签：h1 ~ h6(会自动换行)

<h1 title='标题'>一级标题</h1>

<h3 title='标题'>三级标题</h3>

# 字体加粗且字体大小都是样式，均可以自定义

#h1标签：页面基本上都会出现，有且只有一个，用来标识整个页面的标题

# 2.段落标签（会自动换行）

<p>文本内容</p> 

# 3.文本相关标签(不会自动换行)

<span>文本标签</span>

<i>斜体</i><em>斜体方式强调</em>

<b>加粗</b><strong>加粗方式强调</strong>

<sup>上角标</sup><sub>下角标</sub>

# 4.<div></div> # 没有语义，也没有特殊功能，也没有特殊样式，随意使用，搭建架构

# 5.超链接标签

<a href='' target='' title=''>

# href:链接的地址

# target: _self(当前页面跳转，打开地址)，_blank(跳转到另外一个空白页面，打开地址)

# title:鼠标悬浮提示，可以给任意标签添加

# 锚点：快速定位到页面指定位置

<a name='top' id='top'></a>

<div style='height: 2000px'></div>

<a href='#top'>返回top</a>

# 通过a的name或普通标签的id设置锚点，再通过另一个a的href属性，值为#加锚点名，跳转到设置的锚点位

# 6.图片标签

<img src='' alt='' title='' width=''>

#src:数据源

#alt:资源加载失败的文字提示

#width/height：设置一个另一个会等比缩放（同时设置会导致图片失真）

# 7.表格标签

<table border='' width='' height='' cellsapcing='' rules='all' cellpadding=''>

    <caption>表格标题</caption>

        <thead>

            <tr>

               <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>

#table>(

#    caption{标题}+

#    (thead>tr>th{标题}*3)+

#    (tbody>(tr>td{单元格}*3)*2)+

#    (tfoot>tr>td{单元格}*3)

#    )

# booder:表格边框宽度

# cellsapcing:单元格之间的距离

# rules：all(全部) | groups(组线) | rows(行线) | cols(列线)

# cellpadding:内容距上距左的距离

# 8.分割线

<hr>

# 9.原文本

<pre>呵   呵</pre>

# 10.换行

<br>

# 11.列表（常用）

# 无序列表

<ul>

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

</ul>

# 有序列表

<ol start="" type="I">

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

</ol>
<!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</li>

        <li>test test test</li>

        <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>

        <li>test test test</li>

        <li>test test test</li>

        <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</li>

            <li>test test test</li>

            <li>test test test</li>

            <li>test test test</li>

            <li>test test test</li>

        </ul>

    </div>

    <div>

        <h3>标题 标题 标题</h3>

        <ul>

            <li>test test test</li>

            <li>test test test</li>

            <li>test test test</li>

            <li>test test test</li>

            <li>test test test</li>

        </ul>

    </div>

</div>

</body>

</html>

架构分析

2.CSS：样式层级表

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

三大组成部分：
1.选择器：由标签、类、id单独或组合出现

2.作用域：一组大括号包含的区域

3.样式块：满足css连接语法的众多样式

选择器

什么是选择器？

用来将css与html建立关联的桥梁，称之为css选择器。本质就是页面标签的某种名字。

为什么用选择器？

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

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操作的样式都是行间式

相关文章