JavaWeb from admission to burial

Language 2023-09-17 08:55:17 views: null

JavaWeb

1. HTML

1.1 Basic syntax

Comment

<!-注释-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<h1>注释</h1>-->
<!--这是注释的内容，不会被浏览器解析-->

</body>
</html>

Label

  • opening and closing tags

  • self closing label

     <br/>
 换行
 <hr/>
水平分割线

  • Nesting of tags

    <h1><u>文本</u></h1>

  • Block-level elements: Displayed in the form of a block on the page, occupying its own line, and subsequent content will automatically wrap.

  • Inline elements: Displayed in lines on the page without wrapping. <

div and span

  • : is a general content container with no special semantics. Generally used to group other elements for styling related needs.

  • : is a general in-line container with no special semantics. Generally used to weave elements to achieve a certain style.

  • The core function of tags is to layout the page

1.2 HTML attributes

  1. define format
    • attribute name = attribute value
  2. Specification of properties
    • The names of attributes within the same tag must be unique
    • Not case sensitive, lowercase recommended
    • Attribute values ​​can be enclosed in single quotes or double quotes. It is recommended to use double quotes.
  3. Common properties
    • class: defines the class name of the element, used to select and access a specific element
    • id: defines the unique identifier of the element, which must be unique in the entire document
    • name: defines the name of 1 element, generally used to submit form data to the server
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="cls">第一个1div</div>
<div class="cls">第二个1div</div>
<div id="d1">第三个</div>
<div id="d2">第四个</div>
<div style="background-color:red">第五个</div>
</body>
</html>

1.3 Special characters

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
本网站有   最终解释权
<br>
本网站有&nbsp;&nbsp;  最终解释权

</body>
</html>

1.4 Notes

html comments

vscode：CTRL+/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <!-- 这个是网页身体/主体 -->
    <!-- 这是注释 -->
    <strong>文字要变粗</strong>
</body>
</html>

1.5 Tags

  1. Tags consist of <, >, /, English words or letters. And the English words or letters enclosed by <> in the tag are called tag names.
  2. Common tags are composed of two parts, which we call: double tags. The first part is called the start tag, the second part is called the end tag, and the content is wrapped between the two parts.
  3. A small number of tags are composed of one part, which we call: single tag. It is self-contained and cannot contain content.

tag relationship

  • Parent-child relationship (nested relationship)
  • Brotherhood (parallel relationship)

1.5.1 Title tag

  • Scenario: In news and article pages, titles are indispensable and are used to highlight the topic of the article.

  • Code: h series tag

    <h1>
    1级标题
</h1>
<h2>
    2级标题
</h2>

  • vs code can directly type h1, no need to type <>

1.5.2 Paragraph tags

  • In news and article pages, used for segmented display
  • Code:

    I am a text

  • Features:
    • There are gaps between paragraphs
    • Exclusive party

1.5.3 Line break tag

  • Scenario: Force text to wrap into new lines
  • code
  • Semantics: Line breaks Features:
  • single label
  • Force text to wrap

1.5.4 Horizontal dividing line

  • Scene: a horizontal line that separates different thematic content
  • Code:
  • Semantics: topic segmentation transformation
  • Features:
    Single label
    displays a horizontal line on the page

1.5.5 Text formatting tags

Scenario: Need to make text bold, underline, italic, strikethrough and other effects

Code:

Label illustrate Label illustrate
b Bold strong Bold
u Underline ins Underline
i tilt em tilt
s strikethrough of the strikethrough

Semantics: Emphasis on context that highlights importance (use the word on the right)

1.5.6 Image tags

Scenario: Display images on a web page

Code:

Features:

  • single label
  • The img tag needs to display the corresponding effect and needs to be set with the help of the tag's attributes.
  • Tag names and attributes must be separated by spaces
  • There is no order between attributes

Attribute name: alt

Attribute value:replacement text

  • When the image fails to load, the alt text is displayed.
  • When the image loads successfully, the alt text will not be displayed.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <b>加粗</b>
    <br>
    <strong>加粗</strong>
    <br>
    <u>下划线</u>
    <br>
    <ins>下划线</ins>
    <br>
    <i>倾斜</i>
    <br>
    <em>倾斜</em>
    <br>
    <s>删除线</s>
    <br>
    <del>删除线</del>
    <br>
    <img src="./10327v.gif" alt="替换文本" >
    <!-- src标签属性后面加路径 -->
</body>
</html>

The title attribute of the image tag

Attribute name: title

Attribute value: prompt text

  • Text that only displays when the mouse is hovering

Note: The title attribute can be used not only for image tags, but also for other tags.

<img src="./10327v.gif" alt="替换文本" title="title效果" >

width and height properties

Attribute name: width and height

Attribute values: width and height (number)

important point:

  • If only one of width or height is set, the other one that is not set will automatically scale proportionally (the image will not be deformed at this time)
  • If both width and height are set at the same time, the image may be deformed if not set properly.
<!-- width和height只需要写一个，会等比例缩放 -->
<img src="./10327.gif" alt="替换文本" title="title效果" width="100" height="200">

1.5.7 Path

absolute path

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="D:\pic\OIP-C.jpg" alt="显示不出">
</body>
</html>

relative path

Relative path: The process of finding the target file starting from the current file (current file = the folder where the HTML is located)

Relative path classification:

Same level directory

<img src="目标图片.gif" alt="">
<img src="./目标图片.gif" alt="">

Subdirectory

<img src="img/目标图片.gif" alt="">
<!-- img是指文件夹,/是指文件夹的意思 -->

Parent directory

<img src="../10327.gif" alt="">
<!-- 返回上一级加一个.就欧克 -->

1.5.8 Audio tag

Scenario: Insert audio into the page
Code: <audiosrc=" ./music.mp3"l controls></audio> Common attributes:
attribute name
function
src audio path
controls display playback controls
autoplay automatic play (some browsers do not support )
loop loop playback
points.

Audio tags currently only support three formats: MP3, wav, ogg

1.5.9 Video tag

src audio path
controls display playback controls
autoplay automatic playback (muted is required in Google Chrome to achieve silent playback)
loop loop playback

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video src="视频.mp4" controls autoplay muted></video>
    <!-- <audio src="音频.mp3" controls autoplayt loop></audio> -->
</body>
</html>

The video tag currently only supports three formats: MP4, webm, ogg

1.5.a Link Tags

Scenario: After clicking, jump from one page to another

Name: a tag, hyperlink, anchor link

Code: Hyperlink

Features:

  • Double labels, content can be wrapped inside
  • If you need to click on the a tag to go to the specified page, you need to set the href attribute characteristics of the a tag:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 当开发网站初期,我们还不知道跳转地址的时候,href的值书写#(空链接)-->
    <a href="http://www.baidu.com">跳转到百度</a>
</body>
</html>

Attribute name: target
Attribute value: The opening form of the target web page
Value
Effect
_self Default value, jump in the current window (overwrite the original web page)
_blank Jump in the new window (retain the original web page)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 当开发网站初期,我们还不知道跳转地址的时候,href的值书写#(空链接)-->
    <a href="http://www.baidu.com" target="_blank">跳转到百度</a>
</body>
</html>

1.5.b List tag

  • Scenario: Display relevant content by row on the web page, such as news lists, rankings, bills, etc.
  • Features: Display content neatly according to rows
  • Type: unordered list, ordered list, custom list

unordered list

  • Scenario: Represent a set of non-ordered lists on a web page, such as a news list.

  • Tag composition:

  • tag name illustrate
    ul Represents the entire unordered list, used to wrap the li tag
    li Represents each item of an unordered list, used to contain the content of each row

  • Display features:
    A dot mark is displayed by default before each item in the list.

  • Note:
    Only li tags are allowed in ul tags

    The li tag can contain any content

ordered list

  • Scenario: Representing a set of ordered lists on a web page, such as a ranking list.

  • Tag composition:

  • tag name illustrate
    ol Represents the entire ordered list, used to wrap the li tag
    li Represents each item in an ordered list, used to contain the content of each row

  • Display features:
    The serial number identification is displayed by default before each item in the list.

  • Note:
    Only the li tag is allowed in the ol tag

    The li tag can contain any content

custom list

  • Scenario: Custom lists are usually used in the bottom navigation of web pages.

  • Tag composition:

  • tag name illustrate
    dl Represents the entire custom list, used to wrap dt/dd tags
    dt Represents the theme of the custom list
    dd Represents each item in the custom list for the topic

  • Display features:

  • The indentation effect will be displayed by default before dd

  • Note:
    Only dt/dd tags are allowed in the dl tag

    dt/dd tags can contain any content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        无序列表
        <strong><li>水果标签</li></strong>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>
    <ol>
        有序列表
        <li>第一名</li>
        <li>第二名</li>
        <li>第三名</li>
    </ol>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
    </dl>
</html>

1.5.c Table label

  • Scenario: Neatly display data in rows and columns on a web page, such as a student score sheet

  • Basic tags:

  • tag name illustrate
    table Table as a whole. Can be used to wrap multiple tr
    tr Each row of the table can be used to include td
    td Table cells that can be used to wrap content

  • Note:
    the nesting relationship of tags: table > tr > td

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- table包含tr,tr包含td -->
    <table border="2" width="500" height="1l00">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>sb</td>
            <td>100</td>
            <td>sb</td>
        </tr>
        <tr>
            <td>傻逼</td>
            <td>90</td>
            <td>sb</td>
        </tr>
    </table>
</body>
</html>

table properties

  • Scenario: Set up the basic display effect of the table

  • Commonly related properties:

  • attribute name attribute value Effect
    border border width
    width table width
    height table height

  • important point:

    During actual development, it is recommended to use CSS settings for style effects.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- table包含tr,tr包含td -->
    <table border="2" width="500" height="1l00">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>sb</td>
            <td>100</td>
            <td>sb</td>
        </tr>
        <tr>
            <td>傻逼</td>
            <td>90</td>
            <td>sb</td>
        </tr>
    </table>
</body>
</html>

Table title and header cell label

  • Scenario: Express the overall title and a column of subtitles in a table

  • Other tags:

  • tag name name illustrate
    caption Table title Indicates the overall title of the table, which is displayed in the center of the top of the table by default.
    th header cell Indicates a column of subtitles, usually used in the first row of the table. By default, the internal text is bold and centered.

  • Note:
    the caption tag is written inside the table tag and
    the th tag is written inside the tr tag (used to replace the td tag)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
         <tr>
            <td>sb</td>
            <td>100</td>
            <td>sb</td>
        </tr>
        <tr>
            <td>sb</td>
            <td>100</td>
            <td>sb</td>
        </tr>
        <tr>
            <td>sb</td>
            <td>100</td>
            <td>sb</td>
        </tr>
        
    </table>
</body>
</html>

table structure tags

  • Scenario: Group the content structure of the table and highlight different parts of the table (head, body, bottom) to make the semantics clearer

  • Structure tag:

  • tag name name
    thead Table header
    tbody form body
    tfoot bottom of table

  • important point

    The table structure tag is used to wrap the tr tag inside

    The structure tag of the table can be omitted

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>sb</td>
                <td>100</td>
                <td>sb</td>
            </tr>
            <tr>
                <td>sb</td>
                <td>100</td>
                <td>sb</td>
            </tr>
            <tr>
                <td>sb</td>
                <td>100</td>
                <td>sb</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>12</td>
                <td>13</td>
                <td>14</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Merge Cells

  • Scenario: Merge multiple cells horizontally or vertically into the same cell

  • Steps to merge cells:

  • Specify which cells to merge

  • Use the upper left principle to determine who to keep and who to delete.

    Merge the top and bottom ones, keep the top one, and delete the others.

    Merge the left and right ones and keep the leftmost one. Delete other

  • Set the reserved cells: merge across rows (rowspan) or merge across columns (colspan)

  • attribute name attribute value illustrate
    rowspan Number of merged cells Merge across rows, merge cells in multiple rows vertically
    colspan Number of merged cells Cross-column merge, merge cells in multiple columns horizontally

  • Note:
    Only cells in the same structure label can be merged, not across structure labels (cannot span: thead, tbody, tfoot)

1.6 Form tags

Application scenario: web login page and search function

1.6.1 input series tags

  • Scenario: Display the form effect of collecting user information on the web page, such as: login page, registration page

  • Tag name: input

    The input tag can display different effects through different values ​​of the type attribute.

  • type attribute value:

    tag name type attribute value illustrate
    input text Text box for entering a single line of text
    input password Password box for entering password
    input radio Radio button for multiple selections
    input checkbox Multi-select box for multiple selections
    input file File selection for later uploading files
    input submit Submit button for submitting
    input reset Reset button for resetting
    input button Ordinary buttons have no function by default, and will be added later with js. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 写什么就显示什么 -->
    文本框：<input type="text">
    <br>
    <!-- 书写的内容都显示成点点显示 -->
    密码框: <input type="password">
    <br>
    单选框<input type="radio">
    <br>
    多选框<input type="checkbox">
    <br>
    文件选择上传<input type="file">
    <br>
    提交按钮<input type="submit">
    <br>
    重置按钮<input type="reset" >
    <br>
    普通按钮<input type="button">
</body>
</html>

input series label-text box

  • Scenario: Display a form control for inputting a single line of text on a web page

  • type attribute value: text

  • Common properties:

  • attribute name illustrate
    placeholder Placeholder, text that prompts the user to enter content 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 写什么就显示什么 -->
    文本框：<input type="text" placeholder="请输入用户名">
    <br>
    <!-- 书写的内容都显示成点点显示 -->
    密码框: <input type="password" placeholder="密码">
    <br>
    单选框<input type="radio" placeholder="选择">
    <br>
    多选框<input type="checkbox">
    <br>
    文件选择上传<input type="file">
    <br>
    提交按钮<input type="submit">
    <br>
    重置按钮<input type="reset" >
    <br>
    普通按钮<input type="button">
</body>
</html>

input series label-radio button

  • Scenario: Display a multiple-select radio form control on a web page

  • type attribute value: radio

  • Common properties:

  • attribute name illustrate
    name Grouping, radio button boxes with the same name attribute value are grouped into a group, and only one in a group can be selected at the same time
    checked Selected by default

  • important point:

    The name attribute has a grouping function for radio button boxes

    Radio button boxes with the same name attribute value are a group, and only one in a group can be selected at the same time.

input series tag-file selection

  • Scenario: Display form control type for file selection in a web page

  • Attribute value: file

  • Common properties:

  • attribute name illustrate
    multiple Multiple file selection 
文件选择上传<input type="file">
多文件上传<input type="file" multiple>

input series label-button

  • Scenario: Display button form controls with different functions on a web page

  • type attribute value:

  • tag name type attribute value illustrate
    input submit Submit button, click to submit data to the back-end server
    input reset Reset button, click to restore form default values
    input button Ordinary buttons have no function by default, and will be added later with js.

  • important point:

    If you need to implement the above button functions, you need to use the form method with the form tag.

    The form tag just wraps the form tags together

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        用户名：<input type="text">
        <br>
        <br>
        密码：<input type="password">
        <br>
        <br>
        <!-- 按钮 -->
        <input type="submit">
        <!-- 要想重置成功，还需要表单域 ,即加form，作为父级-->
        <input type="reset" >
        <!-- 想要变字，需要加value -->
        <input type="button" value="普通按钮"> 
    </form>
</body>
</html>

1.6.2 button button label

  • Scenario: Display the button clicked by the user on the web page

  • Tag name: button

  • type属性值(同input的按钮系列):

  • 标签名 type属性值 说明
    input submit 提交按钮，点击之后提交数据给后端服务器
    input reset 重置按钮,点击之后恢复表单默认值
    input button 普通按钮,默认无功能,之后配合js添加功能

  • 注意点:

    谷歌浏览器中button默认是提交按钮

    button标签是双标签，更便于包裹其他内容:文字、图片等

1.6.3 select下拉菜单标签

  • 场景:在网页中提供多个选择项的下拉菜单表单控件

  • 标签组成:

    select标签:下拉菜单的整体

  • option标签:下拉菜单的每一项

  • 常见属性:

    selected:下拉菜单的默认选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select>
        <option >北京</option>
        <option >上海</option>
        <option >广州</option>
        <option selected>成都</option>
    </select>
</body>
</html>

1.6.4 textarea文本域标签

场景:在网页中提供可输入多行文本的表单控件

标签名: textarea

常见属性:

  • cols:规定了文本域内可见宽度
  • rows:规定了文本域内可见行数

注意点:

  • 右下角可以拖拽改变大小
  • 实际开发时针对于样式效果推荐用CSS设置

1.6.5 label标签

  • 场景:常用于绑定内容与表单标签的关系
  • 标签名: label
  • 使用方法①:
    1. 使用label标签把内容(如:文本)包裹起来
    2. 在表单标签上添加id属性
    3. 在label标签的for属性中设置对应的id属性值
  • 使用方法②:
    1. 直接使用label标签把内容(如:文本)和表单标签一起包裹起来
    2. 需要把label标签的for属性删除即可
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    性别：
    <input type="radio" name="gender" id="boy"><label for="boy">男</label>
    <label ><input type="radio" name="gender" >女</label>
</body>
</html>

1.7 语义化标签

1.7.1 没有语义的布局标签div和span

场景:实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签

div标签:一行只显示一个(独占一行)

span标签:一行可以显示多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>divv</div>
    <div>lkqe</div>
    <span>span</span>
    <span>span</span>
</body>
</html>

1.7.2 有语义的布局标签

  • 场景在HTML5新版本中推出了一些有语义的布局标签供开发者使用（手机端网页开发使用）

  • 标签：

  • 标签名 语义
    header 网页头部
    nav 网页导航
    footer 网页底部
    aside 网页侧边框
    sectior 网页区块
    article 网页文章

  • 注意点:

    以上标签显示特点和div一致，但是比div多了不同的语义

1.8 字符实体

常见字符实体

  • 场景:在网页中展示特殊符号效果时，需要使用字符实体替代
  • 结构:&英文;
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rt4bp0wA-1653121646199)(C:\Users\xiaosu\AppData\Roaming\Typora\typora-user-images\image-20220414155655351.png)]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这个是HTML文件，现在要学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实体字符
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="500" height="300">
        <caption><h1>优秀学生信息表格</h1></caption>
        <tr>
            <th>年纪</th>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>
        <tr>
            <th rowspan="2">高三</th>
            <th>汉堡</th>
            <th>112</th>
            <th>1</th>
        </tr>
        <tr>
            <th>汉堡阁</th>
            <th>1120</th>
            <th>2</th>
        </tr>
        <tr>
            <th>评语</th>
            <th colspan="3">sbsb</th>
        </tr>
    </table>
</body>
</html>

2. css

css:层叠样式表(Cascading style sheets)

css语法规则：

css一般写在style标签中,style标签一般写在head标签里面，title标签下面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css注释 */
        /* 选择器{css属性} */
        /* 选择器：查找标签 */
        p{
      
      
            /* 文字颜色 */
            color:brown;
            /* 字变大 px:像素*/
            font-size: 30px;
            /* 背景颜色 */
            background-color: blueviolet;
            width: 400px;
            height: 500px;
        }
    </style>
</head>
<body>  
    <p>这个是p标签</p>
</body>
</html>

css引入方式

内嵌式: CSS写在style标签中

  • 提示: style标签虽然可以写在页面任意位置，但是通常约定写在head标签中

外联式:CSS写在一个单独的.css文件中

  • 提示:需要通过link标签在网页中引入

行内式: CSS写在标签的style属性中

  • 提示:基础班不推荐使用，之后会配合js使用
引入方式 书写位置 作用范围 使用场景
内嵌式 css写在style标签中 当前位置 小案例
外联式 css写在单独的css文件中，通过link标签引入 多个位置 项目中
行内式 css写在标签的style属性中 当前标签 配合js使用

2.1 基础选择器

2.1.1 标签选择器

  • 结构:标签名{ css属性名:属性值;}
  • 作用:通过标签名，找到页面中所有这类标签，设置样式
  • 注意点:
    1. 标签选择器选择的是一类标签，而不是单独某一个
    2. 标签选择器无论嵌套关系有多深，都能找到对应的标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 选择器{} -->
    <style>
        /* 标签选择器就是以标签签名命名的选择器 */
        p{
      
      
            color: rgb(255, 6, 6);
        }
        /* 标签选择器，选中所有的这个标签都生效 */
        
    </style>
</head>
<body>
    <p>pppppppppppp</p>
    <p>11111111111</p>
    <p>22222222</p>
</body>
</html>

2.1.2 类选择器

  • 结构: .类名{ css属性名:属性值;}
  • 作用:通过类名，找到页面中所有带有这个类名的标签，设置样式
  • 注意点:
    1. 所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
    2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
    3. 一个标签可以同时有多个类名，类名之间以空格隔开
    4. 类名可以重复，一个类选择器可以同时选中多个标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .st{
      
      
            color:red;
        }
        .pp{
      
      
            color: rgb(0, 243, 24);
        }
        .size{
      
      
            font-size: 66px;
        }
    </style>
</head>
<body>
    <!-- 应该标签可以使用多个类名，需要K歌隔开即可 -->
    <div class="st size" >22222222222222</div>
    <p class="pp">111111111111</p>
</body>
</html>

2.1.3 id选择器

  • 结构:#id属性值{ css属性名:属性值;}

  • 作用:通过id属性值，找到页面中带有这个id属性值的标签，设置样式

  • 注意点:

    1. 所有标签上都有id属性
    2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!
    3. 一个标签上只能有一个id属性值
    4. 一个id选择器只能选中一个标签
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 定义id选择器 */
        #aa{
        
        
            color: blue;
            font-size: 90px;
        }
    </style>
</head>
<body>
    <p id="aa">1111111111111</p>
    <p>
        2222222222222222
    </p>
</body>
</html>

2.1.4 通配符选择器

  • 结构:* { css属性名:属性值;}
  • 作用:找到页面中所有的标签，设置样式
  • 注意点:
    1. 开发中使用极少，只会在极特殊情况下才会用到
    2. 在基础班小页面中可能会用于去除标签默认的margin和padding(后续讲解)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
      
      
            color: brown;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>1111111111</p>
    <div>11222222222</div>
    <span>3333333333333333</span>
</body>
</html>

2.2 字体和文本样式

2.2.1 字体大小

  • 属性名: font-size

  • 取值:数字+px

  • 注意点:

    谷歌浏览器默认文字大小是16px

    单位需要设置，否则无效

2.2.2 字体粗细

  • 属性名:font-weight
  • 取值:
  • 关键字:
    正常 normal
    加粗 bold
  • 纯数字:100~900的整百数:
    正常 400
    加粗 700
  • 注意点:
  • 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
  • 实际开发中以:正常、加粗两种取值使用最多。

2.2.3 字体样式（是否倾斜）

  • 属性名:font-style
  • 取值:
    1. 正常（默认值) : normal
    2. 倾斜: italic
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* italic倾斜 */
        /* normal正常 */
        div{
      
      
            font-style: italic;
        }
        em{
      
      
        font-style:normal;    
        }
    </style>
</head>
<body>
    <div>11111111111</div>
    <h1>222222222</h1>
    <em>333333333333</em>
</body>
</html>

2.2.4 字体系列

  • 属性名: font-family
  • 常见取值:具体字体1,具体字体2,具体字体3,具体字体4…字体系列
  • 具体字体:“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等…
  • 字体系列: sans-serif、serif、monospace等…
  • 渲染规则:
    1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
    2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
  • 注意点:
    1. 如果字体名称中存在多个单词，推荐使用引号包裹
    2. 最后一项字体系列不需要引号包裹
    3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

无衬线字体(sans-serif)

  1. 特点:文字笔画粗细均匀，并且首尾无装饰
  2. 场景:网页中大多采用无衬线字体
  3. 常见该系列字体:黑体、Arial

衬线字体(serif)

  1. 特点:文字笔画粗细不均，并且首尾有笔锋装饰
  2. 场景:报刊书籍中应用广泛
  3. 常见该系列字体:宋体、Times New Roman

等宽字体(monospace)

  1. 特点:每个字母或文字的宽度相等
  2. 场景:一般用于程序代码编写，有利于代码的阅读和编写
  3. 常见该系列字体:Consolas、fira code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* win网页更倾向微软雅黑 */
        /* mac则是苹方 */
        div{
      
      
            font-family: 宋体;
            /* 如果用户没有微软雅黑,就显示黑体,
            两者都没有则显示电脑中有的无衬线字体类别 */
            font-family: 微软雅黑,黑体,sans-serif;
        }
    </style>
</head>
<body>
    <!-- windows电脑字体是默认微软雅黑 -->
    <div>这个是一个div标签</div>
</body>
</html>

2.2.5 拓展

样式层叠

即样式可以一层一层的层叠覆盖，当一个标签设置了多个样式，相同样式的按最后一个显示。

2.2.6 字体font相关属性的连写

属性名: font(复合属性)

取值:

  • font : style weight size family;

省略要求:

  • 只能省略前两个，如果省略了相当于设置了默认值

注意点:

  • 如果需要同时设置单独和连写形式
  • 要么把单独的样式写在连写的下面
  • 要么把单独的样式写在连写的里面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* font : style weight size family; */
        p{
      
      
          font: italic 700 66px 宋体;  
          /* 一个属性冒号后面书写多个值的写法--复合写法 */
          font: 40px 微软雅黑;
        }
    </style>
</head>
<body>
    <p>这是p标签</p>
</body>
</html>

2.2.7 文本样式

文本缩进

属性名：text_indent

取值：

  • 数字+px
  • 数字+em（推荐：1em =当前标签font-size的大小）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
      
      
            /* 首行缩进2个字符大小 */
            /* 默认字号为16px */
            text-indent: 32px; 
            /* em:一个字的大小 */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>11111111111111111111111111111111111
        1111111111111111111111111111111111
        1111111111111111111111111111111111
        1111111111111111111111111111111111
        111111111111111111111111111111111
        1111111111111111111111111111111</p>
</body>
</html>

文本水平对齐方式

  • 属性名 text-align

  • 取值:

  • 属性值 效果
    left 左对齐
    center 居中对齐
    right 右对齐

  • 注意点:

    如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
      
      
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>新闻标题</h1>
</body>
</html>

text-align : center 能让哪些元素水平居中?

  1. 文本
  2. span标签、a标签
  3. input标签、img标签

注意点:

  1. 如果需要让以上元素水平居中,text-align : center需要给以上元素的父元素设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
      
      
            text-align: center;
        }
        body{
      
      
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>新闻标题</h1>
    <img src="../10327.gif" alt="">
</body>
</html>

文本修饰

  • 属性名text-decoration

  • 取值:

  • 属性值 效果
    underline 下划线（常用）
    line-through 上出现（不常用）
    overline 上划线（几乎不用）
    none 无装饰线（常用）

  • 注意点:

  • 开发中会使用text-decoration : none;清除a标签默认的下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            text-decoration: underline;
        }
        p{
      
      
            text-decoration: line-through;
        }
        h2{
      
      
            text-decoration: overline;
        }
        a{
      
      
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>ppppppppp</p>
    <h2>4444444</h2>
    <a href="https://cn.bing.com/">超链接</a>
</body>
</html>

行高

作用:控制一行的上下行间距

属性名: line-height

取值:

数字+px
倍数（当前标签font-size的倍数)

应用:
让单行文本垂直居中可以设置line-height :文字父元素高度

网页精准布局时，会设置line-height : 1可以取消上下间距

行高与font连写的注意点:

如果同时设置了行高和font连写，注意覆盖问题

font : style weight size/line-height family ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
      
      
            line-height: 50px;
            /* 自己字号的1.5倍 */
            line-height: 1.5;
            font: italic 700 66px/2 宋体;
        }
    </style>
</head>
<body>
    <p>1111111111123
        333333333333
        333333333333
        333333333333
        333333333333
        455555555555
        555555555555
        555555555555
        555555555555
        5555555555555
        55555555555555</p>
</body>
</html>

2.3 选择器进阶

2.3.1 复合选择器

后代选择器

作用:根据 HTML标签的嵌套关系，选择父元素后代中满足条件的元素

选择器语法:选择器1选择器2{ css }

结果:

  • 在选择器1所找到标签的后代(儿子、孙子、重孙子…)中，找到满足选择器2的标签，设置样式

注意点:

  1. 后代包括:儿子、孙子、重孙子…
  2. 后代选择器中，选择器与选择器之前通过空格隔开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 找到div儿子p设置文字颜色为蓝色 */
        div p{
      
      
            color: darkgreen;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    <div>
        <p>这个是div儿子标签</p>
    </div>
</body>
</html>

子代选择器

作用:根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素

选择器语法:选择器1>选择器2{ css }

结果:

  • 在选择器1所找到标签的子代(儿子)中，找到满足选择器2的标签，设置样式

注意点:

  • 子代只包括:儿子
  • 子代选择器中，选择器与选择器之前通过>隔开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 空格隔开的的是后代，儿子，孙子等 */
        /* div a{
            color:rgb(12, 92, 162);
        } */
        /* 只选择儿子 */
        div>a{
      
      
            color: red;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="">这是div里面的a标签</a>
        <p>
            <a href="">这是div里面的a标签里面p标签里面的a标签</a>
        </p>
    </div>
</body>
</html>

2.3.2 并集选择器

作用:同时选择多组标签，设置相同的样式

选择器语法:选择器1，选择器2{ css }

结果:

  • 找到选择器1和选择器2选中的标签，设置样式

注意点:

  1. 并集选择器中的每组选择器之间通过,分隔
  2. 并集选择器中的每组选择器可以是基础选择器或者复合选择器
  3. 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,p,span{
      
      
            color: rgb(255, 0, 0);
        }
    </style>
</head>
<body>
    <p>pppp</p>
    <div>2222222222</div>
    <span>33333</span>
    <h1>333333333333</h1>
</body>
</html>

2.3.3 交集选择器

作用:选中页面中同时满足多个选择器的标签

选择器语法:选择器1选择器2{ css }

结果:

  • (既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

注意点:

  1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔
  2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.box{
      
      
            color: red;
        }
    </style>
</head>
<body>
    <!-- 找1到第一个p -->
    <p class="box">2222222222222</p>
    <p>3333333333333</p>
    <div class="box">44444444444444</div>
</body>
</html>

2.3.4 hover伪类选择器

作用:选中鼠标悬停在元素上的状态，设置样式

选择器语法:选择器:hover { css }

注意点:

  • 伪类选择器选中的元素的某种状态
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 悬停文字是红色 */
        a:hover{
      
      
            color: red;
            background-color: gold;
        }
        div:hover{
      
      
            color: darkgreen;
        }
    </style>
</head>
<body>
    <a href="#">这个是超链接</a>
    <!-- 任何一个标签都可以添加伪类，任何一个标签都可以鼠标悬停 -->
    <div>div</div>
</body>
</html>

2.4 emmet语法

作用：简写语法，快速生成代码

语法：

记忆 示例 效果
标签名 div
类选择器 .red
id选择器 #one
交集选择器 p.red#one

子代选择器 ul>li


内部文本 ul>li(我是li的内容)
  • 我是li的内容
创建多个 ul>li*3

2.5 背景相关属性

2.5.1 背景颜色

属性名: background-color (bgc)

属性值:

  • 颜色取值:关键字、rgb表示法、rgba表示法、十六进制…

注意点:

  • 背景颜色默认值是透明: rgba(0,0,0,0). transparent
  • 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            background-color: rgb(110, 10, 10);
        }
    </style>
</head>
<body>
    <div>sdgsff</div>
</body>
</html>

2.5.2 背景图片

属性名:background-image (bgi)

属性值: background-image: url(‘图片的路径’);

注意点:

  • 背景图片中url中可以省略引号
  • 背景图片默认是在水平和垂直方向平铺的
  • 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

2.5.3 背景平铺

属性名: background-repeat (bgr)

属性值:

取值 效果
repeat （默认值）水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿着水平方向（x轴）平铺
repeat-y 沿着垂直方向（y轴）平铺 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 800px;
            height: 200px;
            background-color: rgb(224, 238, 103);
            background-image: url(../10327.gif);
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div>sdgsff</div>
</body>
</html>

2.5.4 背景位置

属性名：background-position(bgp)

属性值：background-position:水平方向位置 垂直方向位置；

请添加图片描述

注意点：

方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 800px;
            height: 200px;
            background-color: rgb(224, 238, 103);
            background-image: url(../10327.gif);
            background-repeat: no-repeat;
            /* background-position:right bottom; */
            /* background-position: 50px 0; */
            /* background-position: 50px 100px; */
            background-position: -50px 100px;
            /* 背景色和背景图都只显示在盒子里面 */
        }
    </style>
</head>
<body>
    <div>sdgsff</div>
</body>
</html>

2.5.5 属性相关属性连写

属性名: background (bg)

属性值:

  • 单个属性值的合写，取值之间以空格隔开

书写顺序:

  • 推荐: background: color image repeat position

省略问题:

  • 可以按照需求省略

  • 特殊情况:在pc端，如果盒子大小和背景图片大小一样，此时可以直接写

    background: url)

注意点

  • 如果需要设置单独的样式和连写
  • 要么把单独的样式写在连写的下面
  • 要么把单独的样式写在连写的里面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1. 独占一行（一行只能显示一个)
        2. 宽度默认是父元素的宽度，高度默认由内容撑开
        3. 可以设置宽高 */
        div{
      
      
            width: 300px;
            height: 300px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div>11111111</div>
    <div>222222222222</div>
</body>
</html>

2.5.6 img标签和背景图片的区别

需求:需要在网页中展示一张图片的效果?

方法一:直接写上img标签即可

  • img标签是一个标签，不设置宽高默认会以原尺寸显示

方法二:div标签＋背景图片

  • 需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

2.6 元素显示模式

1.块级元素

2.行内元素

3.行内块元素

4.元素显示模式转换

2.6.1 块级元素

显示特点:

  1. 独占一行（一行只能显示一个)
  2. 宽度默认是父元素的宽度，高度默认由内容撑开
  3. 可以设置宽高
  4. 代表标签:
    • div、p、h系列、ul、 li、dl、dt、dd、 form.header、nav、footer…
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 300px;
            height: 300px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div>11111111</div>
    <div>222222222222</div>
</body>
</html>

2.6.2 行内元素

显示特点:

  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高

代表标签:

  • a、 span . b、 u. i、 s. strong、ins、em、del…
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1. 一行可以显示多个
        2. 宽度和高度默认由内容撑开
        3. 不可以设置宽高 */
        span{
      
      
            width: 300px;
            height: 300px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <span>1111111</span>
    <span>2222222222</span>
</body>
</html>

2.6.3 行内块元素

显示特点:

  1. 一行可以显示多个
  2. 可以设置宽高

代表标签:

  • input、textarea、button、select…
  • 特殊情况: img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1. 一行可以显示多个
        2. 可以设置宽高 */
        img{
      
      
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <img src="../10327.gif" alt="">
    <img src="../10327.gif" alt="">
</body>
</html>

2.6.4 元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

语法：

属性 效果 使用频率
display:block 转换成块级元素 较多
display:inline-block 转换成行内块元素 较多
display:inline 转换成行内元素 极少 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 300px;
            height: 200px;
            background-color: bisque;
            /* 转换成行内块 */
            /* display: inline-block; */
            /* 行内 */
            display: inline;
        }
    </style>
</head>
<body>
    <div>11111111111</div>
    <div>2222222222222</div>
</body>
</html>

2.7 拓展

  1. 块级元素一般作为大容器，可以嵌套:文本、块级元素、行内元素、行内块元素等等…
    • 但是:p标签中不要嵌套div、 p、h等块级元素
  2. a标签内部可以嵌套任意元素
    • 但是:a标签不能嵌套a标签

2.8 CSS特性

2.8.1 继承性

  • 特性:子元素有默认继承父元素样式的特点（子承父业)

  • 可以继承的常见属性(文字控制属性都可以继承)

    1. color
    2. font-style、font-weight、font-size、font-family
    3. text-indent、text-align
    4. line-height
    5. …

  • 注意点:

    可以通过调试工具判断样式是否可以继承

  • 如果元素有浏览器默认样式，此时继承性依然存在，

    1. a标签的color会继承失效
    2. h系列标签的font-size会继承失效
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 文字控制属性都可以继承,不是控制文字的都不能继承 */
        div{
      
      
            color: red;
            font-size: 30px;
            height: 300px;
        }
        a{
      
      
            color: red;
        }
    </style>
</head>
<body>
    <div>
        2222222222
        <p>1111111111111</p>
    </div>
    <div>
        注意事项
        <a href="#">超链接</a>
        <h1>222222222</h1>
    </div>
</body>
</html>

2.8.2 层叠性

  • 特性:
    1. 给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上
    2. 给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效
  • 注意点:
    1. 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            color: red;
            color: green;
        }
        .box{
      
      
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

2.8.3 优先级

  • 特性:不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
  • 优先级公式:
    • 继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
  • 注意点:
    1. !important写在属性值的后面，分号的前面!
    2. !important不能提升继承的优先级，只要是继承优先级最低!
    3. 实际开发中不建议使用!important .
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
      
      
            color:blue
        }
        .box{
      
      
            color: orange;
        }
        body{
      
      
            color: red;
        }
        div{
      
      
            color: rgb(16, 198, 16) !important;
        }
        /* !timportant不要给维承的添加,自己有样式无法维承父级样式 */

    </style>
</head>
<body>
    <!-- 意义:当一个标签使用了多个选择器，样式冲突的时候，到底谁生效 -->
    <div class="box" id="box" style="color: indianred;">测试</div>
</body>
</html>

权重叠加计算

场景:如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

权重叠加计算公式:(每一级之间不存在进位)
请添加图片描述
比较规则

  1. 先比较第一级数字，如果比较出来了，之后的统统不看
  2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
  3. ……
  4. 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!)

注意点: !important如果不是继承，则权重最高，天下第一!

2.9 盒子模型

  1. 盒子的概念
    1. 页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
    2. 浏览器在渲染(显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
  2. 盒子模型
    • CSS 中规定每个盒子分别由:**内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域（margin)**构成，这就是盒子模型
  3. 记忆:可以联想现实中的包装盒

2.9.1 内容的宽度和高度

作用:利用width 和height属性默认设置是盒子内容区域的大小

属性: width / height

常见取值:数字+px

2.9.2 边框(bordre)

属性名:border

属性值:单个取值的连写，取值之间以空格隔开

  • 如: border : 10px solid red;

快捷键:bd + tab

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 边框线 */
            /* solid实线 */
            /* border: 1px solid red; */
            /* dashed虚线 */
            /* border: 1px dashed #000; */
            /* dotted点线 */
            border: 1px dotted #000;
            /* 内边距 */
            padding: 20px;
            /* 外边距 */
            margin: 20px;
            
        }
    </style>
</head>
<body>
    <div>内容</div>
    <div>内容</div>
</body>
</html>

2.9.3 边框 - 单方向设置

场景:只给盒子的某个方向单独设置边框

属性名: border-方位名词

属性值:连写的取值

2.9.4 边框 - 单个属性

作用:给设置边框粗细、边框样式、边框颜色效果

单个属性:

作用 属性名 属性值
边框粗细 border-width 数字+px
边框样式 border-style 实线solid,dashed虚线,dotted点线
边框颜色 border-color 颜色取值

2.9.5 盒子实际大小初级计算公式

需求:盒予足st 400*400.背景绿色，边框10px实线黑色，如何完成?

盒子实际大小初级计算公式:

解决:当盒子被border撑大后，如何满足需求?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            /* 盒子尺寸=width/height+边框线 */
            /* border会撑大盒子尺寸 */
            width: 380px;
            height: 380px;
            background-color: #f1939c;
            border-color: green;
            border: 10px solid #000;
        }
    </style>
</head>
<body>
    <div>
        div
    </div>
</body>
</html>

2.9.6 内边距(padding)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 400px;
            height: 400px;
            background-color: rgb(147, 82, 82);
            /* 添加了4个方向的内边距 */
            padding: 50px;
            /* padding属性可以当作复合属性使用，
            表示可以单独设置某个方向的内边距 */
            /* padding最多取4个值 */

            /* 4个值分别对应上右下左 */
            /* padding: 10px 20px 30px 40px; */
            /* padding: 10px 20px 30px ; */
            padding: 10px 20px ;
            /* 缺失的和对面一样取值 */

        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

2.9.7 css3盒模型（自动内减）

  • 需求:盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成?
  • 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大?
  • 解决方法①∶手动内减
    • 操作:自己计算多余大小，手动在内容中减去
    • 缺点:项目中计算量太大，很麻烦
  • 解决方法②∶自动内减
    • 操作:给盒子设置属性box-sizing : border-box;即可
    • 优点:浏览器会自动计算多余大小，自动在内容中减去
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 100px;
            height: 100px;
            background-color: rgb(20, 20, 20);
            border: 20px solid red;
            padding: 20px;
            /* 变成css3的盒子模型，
            优点加了border和padding不需要手动减法 */
            
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

2.9.8 外边距(margin)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 100px;
            height: 100px;
            background-color: rgb(36, 227, 18);
            margin: 50px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

2.9.9 清除默认的内外边距

  • 场景:浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置
    1. 比如: body标签默认有margin: 8px
    2. 比如:p标签默认有上下的margin
    3. 比如: ul标签默认由上下的margin和padding-left
    4. ······
  • 解决方法:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
      
      
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <p>ppppppppp</p>
    <p>ppppppppp</p>
    <h1>111111</h1>
    <ul>
        <li>2222222222</li>
    </ul>
</body>
</html>

2.9.a 版心居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 1000px;
            height: 300px;
            background-color: rgb(206, 35, 64);
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 版心:网页的有效内容 -->
    <!-- 版心居中 -->
    <div>版心居中</div>
</body>
</html>

2.9.b 外边距问题

1.外边距折叠现象

  • 场景垂直布局的块级元素上下的margin会合并
  • 结果:最终两者距离为margin的最大值
  • 解决方法:避免就好
    • 只给其中一个盒子设置margin即可
      请添加图片描述

当编写one时，图像为下图：
请添加图片描述
添加two之后没有变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 100px;
            height: 100px;
            background-color: rgba(193, 227, 27, 0.771);
        }
        .one{
      
      
            margin-bottom: 50px;
        }
        .two{
      
      
            margin-bottom: 50px;
        }

    </style>
</head>
<body>
    <div class="one">11</div>
    <div class="two">22</div>
</body>
</html>

2. 塌陷问题

  • 场景互相嵌套的块级元素，子元素的margin-top 会作用在父元素上
  • 结果:导致父元素一起往下移动
  • 解决方法:
    1. 给父元素设置border-top 或者padding-top (分隔父子元素的margin-top)
    2. 给父元素设置overflow: hidden
    3. 转换成行内块元素
    4. 设置浮动
      请添加图片描述请添加图片描述
      子集加外边距导致父级增加外边距下移
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
      
      
            width: 300px;
            height: 300px;
            background-color: pink;
            /* border: 1px solid #000; */
            /* overflow: hidden; */
        }
        .son{
      
      
            width: 100px;
            height: 100px;
            background-color: rgb(47, 18, 239);
            /* margin-top: 50px; */
            display: inline-block;
        }

    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>

2.9.c 行内元素的内外边距的问题

解决方法：

  1. 转换模式
  2. 加行高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
      
      
            /* margin: 100px; */
            /* padding: 100px; */
            line-height: 100px;
        }
    </style>
</head>
<body>
    <!-- 行内元素      内外边距  margin padding -->

    <!-- 如果想要通过margin或
        padding改变行内标签的垂直位置，无法生效 -->
        <!-- 行内体的margin-top和bottom不生效 -->
        <!-- 行内标签的padding-top或botttom不生效 -->

    <span>span</span>
    <span>span</span>
</body>
</html>

2.10 选择器

2.10.1 结构伪类选择器

目标:能够使用结构伪类选择器在HTML中定位元素

  1. 作用与优势:
    1. 作用:根据元素在HTML中的结构关系查找元素
    2. 优势:减少对于HTML中类的依赖，有利于保持代码整洁
    3. 场景:常用于查找某父级选择器中的子元素
  2. 选择器
选择器 说明
E:first-chaild{} 匹配父元素中第一个子元素，并且是E元素
E:last-chaild{} 匹配父元素中最后一个子元素，并且是E元素
E:nth-chaild(n){} 匹配父元素中第n个子元素，并且是E元素
E:nth-last-chaild(n){} 匹配父元素中倒数第n个子元素，并且是E元素 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中第一个 */
        li:first-child{
      
      
            background-color: green;
        }

        /* 最后一个 */
        li:last-child{
      
      
            background-color: pink;
        }
        li:nth-child(3){
      
      
            background-color: black;
        }
    </style>
</head>
<body>
    <!-- ul>li{这个是第$个li}*8 -->
    <ul>
        <li>这个是第1个li</li>
        <li>这个是第2个li</li>
        <li>这个是第3个li</li>
        <li>这个是第4个li</li>
        <li>这个是第5个li</li>
        <li>这个是第6个li</li>
        <li>这个是第7个li</li>
        <li>这个是第8个li</li>
    </ul>
</body>
</html>

n的注意点:

  1. n为: 0、1、2、3、4、5、6.

  2. 通过n可以组成常见公式

    功能 公式
    偶数 2n，even
    奇数 2n+1、2n-1、odd
    找到前5个 -n+5
    找到从第5个往后 n+5 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 取偶数 */
    /* li:nth-child(2n){
        background-color: green;
    } */
    /* 取奇数 */
    /* li:nth-child(2n-1){
        background-color: green;
    } */
    li:nth-child(4n){
        
        
        background-color: green;
    }
</style>
<body>
    <ul>
        <li>这个是第1个li</li>
        <li>这个是第2个li</li>
        <li>这个是第3个li</li>
        <li>这个是第4个li</li>
        <li>这个是第5个li</li>
        <li>这个是第6个li</li>
        <li>这个是第7个li</li>
        <li>这个是第8个li</li>
    </ul>
</body>
</html>

2.10.2 伪元素

目标:能够使用伪元素在网页中创建内容

  • 伪元素:一般页面中的非主体内容可以使用伪元素

  • 区别:

    1. 元素:HTML设置的标签
    2. 伪元素:由CSS模拟出的标签效果

  • 种类:

  • 伪元素 作用
    :: before 在父元素内容的最前添加一个伪元素
    : : after 在父元素内容的最后添加一个伪元素

  • 注意点:

    1. 必须设置content属性才能生效
    2. 伪元素默认是行内元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
      
      

            width: 300px;
            height: 300px;
            background-color: pink;
    }
    .father::before{
      
      
        /* 内容 */
        content: "老鼠";
        color: green;
        width: 100px;
        height: 100px;
        background-color: blue;
        /* 默认宽高不生效 */
        /* 要转换为行内才生效 */
        display:block ;
    }
    .father::after{
      
      
        content: "大米";
    }
    </style>
</head>
<body>
    <!-- 伪元素，通过css创建标签，
        装饰性的不重要的小图 -->
        <!-- 老鼠爱大米 -->
        <div class="father">爱</div>
</body>
</html>

2.11 网页布局

2.11.1 标准流

  • 标准流:又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
  • 常见标准流排版规则:
    1. 块级元素:从上往下，垂直布局，独占一行
    2. 行内元素或行内块元素:从左往右，水平布局，空间不够自动折行

2.11.2 浮动（重点）

浮动的作用

早期的作用:图文环绕

现在的作用:网页布局（块标签完美的在一行排列显示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            display: inline-block;
            width: 100px;
            height: 100px;
        }
        .one{
      
      
            background-color: pink;
        }
        .two{
      
      
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 中间出现空白是因为换行了,产生一个空格的间距 -->
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* img{
            float: left;
        } */
        div{
      
      
            width: 100px;
            height: 100px;
        }
        .one{
      
      
            background-color: pink;
            float: left;
        }
        .two{
      
      
            background-color: skyblue;
            float: right;
        }
    </style>
</head>
<body>
    <!-- <img src="../10327.gif" alt="">
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配
    akfnanfa时间内佛按发票开发的那篇肥牛片经济批发频繁屁哦匹配 -->
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

浮动特点

  1. 浮动元素会脱离标准流(简称:脱标)，在标准流中不占位置
    • 相当于从地面飘到空中
  2. 浮动元素比标准流高半级，可以覆盖标准流中的元素
  3. 浮动找浮动，下一个浮动元素会在上一个浮动元素的后面左右浮动
  4. 浮动元素有特殊的显示效果
    • 一行可以显示多个

注意点：

浮动的元素不能通过text-align:center或者margin:0 auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 浮动的标签顶对齐 */
        /* 浮动：在一行排列，宽高生效--------浮动之后的标签
        具备行内块的特点 */
        .one{
      
      
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
            margin-top: 50px;
        }
        .two{
      
      
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
            /* 因为有浮动，不能生效----盒子无法水平居中 */
            margin:0 auto;
        }
        .three{
      
      
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>

</body>
</html>

2.11.3 css属性顺序

css书写顺序：浏览器执行更高

  1. 定位
  2. 浮动/display
  3. 盒子模型：margin,border,padding,宽高背景色
  4. 文字样式

2.11.4 清除浮动

  • 含义:清除浮动带来的影响
    • 影响:如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
  • 原因:
    • 子元素浮动后脱标→不占位置
  • 目的:
    • 需要父元素有高度，从而不影响其他网页元素的布局

受影响的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
      
      
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
      
      
            height: 100px;
            background-color: green;
        }

        .left {
      
      
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
      
      
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

清除浮动方法

直接设置父元素的高度

特点:

  1. 优点:简单粗暴，方便
  2. 缺点:有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块

额外标签法

操作:

  1. 在父元素内容的最后添加一个块级元素
  2. 给添加的块级元素设置clear:both

特点:

  • 缺点:会在页面中添加额外的标签，会让页面的HTML结构变得复杂

当伪元素清除法(与额外标签法原理相同)

操作:用伪元素替代了额外标签

基本写法

.clearfix::after{
            content: "";
            display: block;
            clear: both;
			}


.clearfix::after{
            content: "";
            display: block;
            clear: both;
            /* 补充代码：在网页中看不见的伪元素 */
            height: 0;
            visibility: hidden;
        }

特点

  • 有点项目中使用，直接给标签加类即可清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
      
      
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
      
      
            height: 100px;
            background-color: green;
        }

        .left {
      
      
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
      
      
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /* 单伪元素清除浮动 */
        .clearfix::after{
      
      
            content: "";
            /* 伪元素没有contcent伪元素就不会生效 */
            display: block;
            /* 因为伪元素添加的行内元素，要求是块元素 */
            clear: both;
            /* 补充代码：在网页中看不见的伪元素 目的为保持兼容性*/
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 通过css添加标签 -->
    </div>
    <div class="bottom"></div>
</body>
</html>

双伪元素清除法

操作

        .clearfix::before,
        .clearfix::after{
            content: "";
            display: table;
        }
        .clearfix::after{
            clear: both;
        }

特点

  • 优点：项目中使用，直接给标签加类即可清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
      
      
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
      
      
            height: 100px;
            background-color: green;
        }

        .left {
      
      
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
      
      
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
        /* .clearfix::before作用：解决外边距塌陷问题 
        外边距塌陷：父子级标签，都是块级，
        子级加margin会影响父级的位置*/
        .clearfix::before,
        .clearfix::after{
      
      
            content: "";
            /* 转换为表格的形式，table解决外边距塌陷问题 */
            display: table;
        }
        /* 真正清除浮动的标签 */
        .clearfix::after{
      
      
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

给父元素设置overflow: hidden

操作

  1. 直接给父元素设置overflow: hidden

特点

  • 特点：方便
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
      
      
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
            overflow: hidden;
        }

        .bottom {
      
      
            height: 100px;
            background-color: green;
        }

        .left {
      
      
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
      
      
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

2.11.5 定位

1. 定位的基本介绍

网页常见的布局

  1. 标准流
    1. 块级元素独占一行→垂直布局
    2. 行内元素/行内块元素一行显示多个→水平布局
  2. 浮动
    1. 可以让原本垂直布局的块级元素变成水平布局
  3. 定位
    1. 可以让元素自由的摆放在网页的任意位置
    2. 一般用于盒子之间的层叠情况

定位的常见应用场景

  1. 可以解决盒子与盒子之间的层叠问题
    • 定位之后的元素层级最高，可以层叠在其他盒子上面
  2. 可以让盒子始终固定在屏幕中的某个位置
2. 定位的基本使用

使用步骤

设置定位方式

属性名：position

常见属性值

定位方式 属性值
静态定位 static
相对定位 relative
绝对定位 absolute
固定定位 fixed

设置偏移值

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

选取的原则一般是就近原则（离哪边近用哪个)

方向 属性名 属性值 含义
水平 left 数字+px 距离左边的距离
水平 right 数字+px 距离右边的距离
垂直 top 数字+px 距离上边的距离
垂直 bottom 数字+px 距离下边的距离

静态定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css书写：1.定位/浮动/display/;
        2. 盒子模型；3.文字属性 */
        .box{
      
      
            /* 静态定位，默认值，标准流 */
            position: static;
             left: 100px; /*无效果 */
            top: 200px;  /*无效果 */

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

</body>
</html>
3. 相对定位
  • 介绍:自恋型定位，相对于自己之前的位置进行移动
  • 代码:position : relative;
  • 特点:
    1. 需要配合方位属性实现移动 (改变位置参照自己原来的位置)
    2. 相对于自己原来位置进行移动
    3. 在页面中占位置→没有脱标准流 (占有原来的位置)
    4. 仍然具有标签原有的显示特点
  • 应用场景:
    1. 配合绝对定位组CP(子绝父相)
    2. 用于小范围的移动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css书写：1.定位/浮动/display/;
        2. 盒子模型；3.文字属性 */
        .box{
      
      
            /* 静态定位，默认值，标准流 */
            position: relative;
            left: 100px;
            top: 200px;
            /* 
            相对定位的特点
            1. 占有原来的位置
            2.仍然具有标签原有的显示特点 
            3.改变位置参照自己原来的位置*/

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

</body>
</html>

注意：

  1. 定位中当同时写了左右时，生效左，水平则上以left为准
  2. 定位中当同时写了上下时，生效上，垂直则上以top为准
  3. 当写了左右上下等方位，注释掉，则显示原本标准流时位置
4. 绝对定位

介绍:拼爹型定位，相对于非静态定位的父元素进行定位移动

代码: position: absolute;

特点:

  1. 需要配合方位属性实现移动
  2. 默认相对于浏览器可视区域进行移动
  3. 在页面中不占位置→已经脱标

应用场景:

  1. 配合绝对定位组CP(子绝父相)

情况：父级无定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css书写：1.定位/浮动/display/;
        2. 盒子模型；3.文字属性 */
        .box{
      
      
            /* 绝对定位：
                    先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位;
                    有父级，但父级没有定位，以浏览器窗口为参照为进行定位
             */
             position: absolute;  /* poa */
             /* left: 50px; */
             left: 0px;
             top: 0px;

             /* 特点：
             1. 脱标的，不占位置的
             2.改变标签的显示模式特点：
             具体行内特点（在一行共存，宽高生效）
             */

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

</body>
</html>

绝对定位-居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
      
      
            /* 1.绝对定位的盒子不能使用左右margin auto居中 */ 
            position: absolute;
            /* 标准流居中 */
            /* margin: 0 auto; */
            left: 50%;
            margin-left: -150px;
            top: 50%;
            margin-top: -150px;

            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

绝对定位-位移居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
      
      
            /* 1.绝对定位的盒子不能使用左右margin auto居中 */ 
            position: absolute;
            /* 标准流居中 */
            /* margin: 0 auto; */
            left: 50%;
            /* margin-left: -150px; */
            top: 50%;
            /* margin-top: -150px; */
            /* 位移：自己宽高的一半 */
            transform: translate(-50%,-50%);
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
5. 子绝父相

情况：有父级定位（父级(广义上的定位)一般使用相对定位即：position: relative;），子级一般使用绝对定位

绝对定位查找父级方式：就近找定位的父级， 如果逐层查找不到这样的父级，就以浏览器窗口为参考进行定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
      
      
            position: relative;

            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .son{
      
      
            /* position: relative; */
            /* position: absolute; */

            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .sun{
      
      
            position: absolute;
            /* left: 100px;
            top:100px; */
            right: 20px;
            bottom: 50px;

            width: 200px;
            height: 200px;
            background-color: green;
        }
        /* 绝对定位查找父级方式：就近找定位的父级，
        如果逐层查找不到这样的父级，
        就以浏览器窗口为参考进行定位 */
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <div class="sun"></div>
        </div>
    </div>
</body>
</html>
6. 固定定位

介绍:死心眼型定位，相对于浏览器进行定位移动

代码: position : fixed ;

特点:

  1. 需要配合方位属性实现移动
  2. 相对于浏览器可视区域进行移动
  3. 在页面中不占位置→已经脱标

应用场景:

  1. 让盒子固定在屏幕中的某个位置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css书写：1.定位/浮动/display/;
        2. 盒子模型；3.文字属性 */
        .box{
      
      
            position: fixed;
            left: 0;
            top: 0;
            /* 
            1.脱标--不占位置
            2.改变位置参考浏览器窗口
            3.具备行内块特点
            */

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>
7. 元素的层级关系

不同布局方式元素的层级关系:

  • 标准流<浮动<定位

不同定位之间的层级关系:

  • 相对、绝对、固定默认层级相同
  • 此时HTML中写在下面的元素层级更高，会覆盖上面的元素

调整层级关系

  • z-index:整数;取值越大，显示顺序越靠上
  • z-index的默认值是0
  • z-index必须配合定位一起用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 200px;
            height: 200px;
        }
        .one{
      
      
            position: absolute;
            left: 20px;
            top: 50px;
            background-color: pink;
            z-index: 1;
        }
        .two{
      
      
            position: absolute;
            left: 50px;
            top: 40px;
            background-color: skyblue;
        }
        /* 默认情况下，定位的盒子，后来者居上
        z-index:整数;取值越大，显示顺序越靠上 
        z-index的默认值是0
        z-index必须配合定位一起用
        */
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

2.12 装饰

2.12.1 认识基线

基线:浏览器文字类型元素排版中存在用于对齐的基线(baseline)

行内和行内块浏览器默认按照文字解析

文字对齐问题

场景:解决行内/行内块元素垂直对齐问题

问题:当图片和文字在一行中显示时，其实底部不是对齐的

2.12.2 垂直对齐方式

属性名: vertical-align

属性值:

属性值 效果
baseline 默认，基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 浏览器遇到行内和行内块当作文字处理，
        默认字体是按照基线对齐的 */
        input{
      
      
            height: 50px;
            box-sizing: border-box;

            vertical-align: middle;
        }
    </style>
</head>
<body>
    <input type="text"><input type="button" value="搜索">
</body>
</html>

情况二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
      
      
            width: 400px;
            background-color: pink;
        }
        img{
      
      
            /* 解决方案一 */
            /* vertical-align: middle; */
            display: block;
        }
    </style>
</head>
<body>
    <div class="father">
        <img src="./10327.gif" alt="">
    </div>
</body>
</html>

情况三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
      
      
            width: 400px;
            height: 400px;
            background-color: pink;
            line-height: 400px;
            text-align: center;
        }
        img{
      
      
            vertical-align: middle;
        }
        
    </style>
</head>
<body>
    <div class="father">
        <img src="./10327.gif" alt="">
    </div>
</body>
</html>

2.12.3 光标类型

场景:设置鼠标光标在元素上时显示的样式

属性名: cursor

常见属性值:

属性值 效果
default 默认值。通常是箭头
pointer 小手效果，提示用户可以点击
text 工字型，提示用户可以选择文字
move 十字光标，提示用户可以移动 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 手型 */
            /* cursor: pointer; */
            /* cursor: text;
            cursor: move; */

        }
    </style>
</head>
<body>
    <div>
        div
    </div>
</body>
</html>

2.12.4 边框圆角

场景:让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名: border-radius

常见取值:数字+px、百分比

原理:
请添加图片描述
赋值规则:从左上角开始赋值，然后顺时针赋值，没有赋值的看对角!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
      
      
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 一个值：表示4个角是相同的 */
            /* border-radius: 10px; */
            /* border-radius: 10px 20px 30px 40px; */
            /* 4值：左上，右上，右下，左下，从左上顺时针转一圈 */

            border-radius: 10px 40px 80px;
            /* 没有值则和对角一样 */
        }

    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

画一个正圆

  1. 盒子必须是正方形
  2. 设置边框圆角为盒子宽高的一半border-radius:50%

胶囊按钮

  1. 盒子要求是长方形
  2. 设置→border-radius:盒子高度的一半
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
      
      
            width: 200px;
            height: 200px;
            background-color: green;

            border-radius: 50%;
        }
        .two{
      
      
            width: 200px;
            height: 100px;
            background-color: pink;

            border-radius: 70px;
        }

    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

2.12.5 overfiow溢出部分显示效果

溢出部分:指的是盒子内容部分所超出盒子范围的区域

场景︰控制内容溢出部分的显示效果，如:显示、隐藏、滚动条…

属性名: overflow

常见属性值:

属性值 效果
visible 默认值,溢出部分可见
hidden 溢出部分隐藏
scroll 无论是否溢出。都显示滚动条
auto 根据是否溢出，自动显示或隐藏滚动条 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
      
      
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 溢出部分隐藏 */
            /* overflow: hidden; */

            /* 无论是否溢出。都显示滚动条 */
            /* overflow: scroll; */

            /*  根据是否溢出，自动显示或隐藏滚动条*/
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="box">我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
    </div>
</body>
</html>

2.12.6 元素本身隐藏

场景:让某元素本身在屏幕中不可见。如:鼠标:hover之后元素隐藏

常见属性:

  1. visibility: hidden
  2. display: none
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 200px;
            height: 200px;
        }
        .one{
      
      
            /* 占位的隐藏，工作中不经常使用 */
            /* visibility: hidden; */

            /* 不占位的隐藏 */
            display: none;
            background-color: pink;
        }
        .two{
      
      
            background-color: green;
        }
        

    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

2.12.7 元素的整体透明度

场景:让某元素整体（包括内容)一起变透明

属性名: opacity

属性值:0~1之间的数字

  • 1:表示完全不透明
  • 0:表示完全透明

注意点:

  • opacity会让元素整体透明，包括里面的内容，如:文字、子元素等…
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
           width: 400px;
           height: 400px;

            background-color: green;

            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div>
        <img src="./10327.gif" alt="">

    </div>
</body>
</html>

2.13 项目样式于前置

2.13.1 精灵图

场景:项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

优点:减少服务器发送次数，减轻服务器的压力，提高页面加载速度

精灵图使用步骤

创建一个盒子,设置盒子的尺寸和小图尺寸相同

将精灵图设置为盒子的背景图片

修改背景图位置

通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的

background-position: x y

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
      
      
            display: inline-block;
            width: 18px;
            height: 24px;
            background-color: pink;
            background-image: url(./taobao.png);
            /* 背景图位置属性：改变背景图的位置 */
            /* 水平位置，垂直位置 */
            /* 想要向左移动图片，位置取负数；垂直方向位置，向上为负数*/
            background-position:-3px ;
        }
        b{
      
      
            display: inline-block;
            width: 25px;
            height: 21px;
            background-color: green;
            background-image:url(./taobao.png) ;
            background-position: 0 -90px;
        }
    </style>
</head>
<body>
    <!-- 精灵图的标签都用行内标签  span   b  i -->
    <span></span>
    <b></b>
</body>
</html>

2.13.2 背景图图片大小

作用:设置背景图片的大小

语法: background-size:宽度高度;

取值:

取值 场景
数字+px 简单方便，常用
百分比 相对于当前盒子自身的宽高百分比
contain 包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
      
      
            width: 400px;
            height: 300px;
            background-color: green;
            background-image: url(./1.jpg);
            background-repeat: no-repeat;

            /* background-size: 300px; */
            /* background-size: 100%; */

            /* 如果图的宽高和盒子尺寸相同，另一个方向停止缩放 */
            /* background-size: contain; */

            /* 保证宽和高和盒子尺寸完全相同，导致图片显示不全 */
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

background连写拓展

完整连写:

background: color image repeat position/size;
注意点:

  • background-size和background连写同时设置时，需要注意覆盖问题

解决:

  1. 要么单独的样式写连写的下面
  2. 要么单独的样式写在连写的里面

2.13.3 盒子阴影

作用:给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名:box-shadow

取值：

参数 作用
h-shadow 必须，水平偏移量。允许负值
v-shadow 必须，垂直偏移量。允许负值
blur 可选，模糊度
spread 可选。阴影扩大
color 可选，阴影颜色
inset 可选，将阴影改为内部阴影 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
      
      
            width: 200px;
            height: 200px;
            background-color: pink;

            box-shadow: 5px 10px 20px 10px green inset;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.13.4 过渡

作用:让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

属性名: transition

常见取值:

参数 取值
过渡的属性 al1:所有能过渡的属性都过渡、具体属性名如: width:只有width有过渡
过渡的时长 数字+s(秒)

注意点:

  1. 过渡需要:默认状态和hover状态样式不同，才能有过渡效果
  2. transition属性给需要过渡的元素本身加
  3. transition属性设置在不同状态中，效果不同的
    • 给默认状态设置，鼠标移入移出都有过渡效果
    • 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
      
      
            /* 过渡一般配合hover使用,谁变化，谁加过渡属性 */
            width: 200px;
            height: 200px;
            background-color: green;
            /* 宽度200，悬停的时候宽度600，花费1秒钟 */

            /* transition: width 1s,background-color 2s; */
            /* 如果变化属性比较多，写all,表示所有 */
            transition: all 1s;
        }
        .box:hover{
      
      
            width: 600px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.13.5 骨架

<!DOCTYPE html>文档类型声明，告诉浏览器该网页的HTML版本

<html lang="en">标识网页使用的语言
作用:搜索引擎归类＋浏览器翻译
常见语言: zh-CN简体中文/ en英文

<meta charset="UTF-8">标识网页使用的字符编码
作用:保存和打开的字符编码需要统一设置，否则可能会出现乱码
常见字符编码:
1. UTF-8:万国码，国际化的字符编码，收录了全球语言的文字
2. GB2312: 6000+汉字
3. GBK: 20000+汉字
注意点:开发中统一使用UTF-8字符编码即可


<!-- ie(兼容性差)/edge -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 宽度=设备宽度:移动端网页的时候用 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

2.13.6 SEO三大标签

SEO (Search Engine Optimization) :搜索引擎优化

作用:让网站在搜索引擎上的排名靠前

提升SEO排名常见方法：

  1. 竞价排名
  2. 将网页制作成html后缀
  3. 标签语义化（在适合的地方使用合适的标签）
  4. …

SEO三大标签

  • title: 网页标题标签
  • description:网页描述标签
  • keywords: 网页关键词标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- meta:desc -->
    <meta name="description" content="..........">
    <!-- meta:kw -->
    <meta name="keywords" content="11111111123">
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!
    </title>
</head>
<body>
    
</body>
</html>

2.13.7 ico图标设置

场景:显示在标签页标题左侧的小图标，习惯使用.ico格式的图标

常见代码：

<link rel="shortcut icon" href="icon图标路径" type="imge/x-icon">

2.14 项目结构搭建

2.14 1 文件和目录准备

新建项目文件夹xtx-pc-client,在VScode中打开

在实际开发中，项目文件夹不建议使用中文

所有项目相关文件都保存在xtx-pc-client目录中

复制favicon.ico到xtx-pc-client目录

一般习惯将ico图标放在项目根目录
复制images 和uploads目录到xtx-pc-client目录中

images :存放网站固定使用的图片素材，如: logo、样式修饰图片…等

uploads:存放网站非固定使用的图片素材，如:商品图片、宣传图片…等

新建index.html在根目录

新建css文件夹保存网站的样式，并新建以下CSS文件:

base.css:基础公共样式

common.css:该网站中多个网页相同模块的重复样式，如:头部、底部

index.css:首页样式

基础公共样式

index页面骨架

请添加图片描述

案例

小兔鲜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 按顺序引入：外链式样式表后写生效 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <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="#"><span></span>手机版</a></li>
            </ul>
        </div>
    </div>


    <!-- 头部 -->
    <div class="header wrapper">
        <div class="logo">
            <h1><a href="#">小兔鲜儿</a></h1>
        </div>
        <div 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>
                <li><a href="#">孕婴</a></li>
                <li><a href="#">服装</a></li>
            </ul>
        </div>
        <div class="search ">
            <!-- 定位实现 放大镜 -->
            <span></span>
            <input type="text" placeholder="搜一搜">
            
            
        </div>
        <div class="car">
            <span>2</span>
        </div>
    </div>

    <!-- banner -->
    <div class="banner">
        <div class="wrapper">
            <!-- 有多少个图，就有多少个li -->
            <ul>
                <li><a href="#">
                    <img src="./uploads/banner_1.png" alt="">
                </a></li>
            </ul>

            <!-- 侧导航 -->
            <div class="aside">
                <ul>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">美食<span>面点 干果</span></a></li>
                    <li><a href="#">餐厨<span>数码产品</span></a></li>
                    <li><a href="#">电器<span>床品 四件套 被枕</span></a></li>
                    <li><a href="#">居家<span>奶粉 玩具 辅食</span></a></li>
                    <li><a href="#">洗护<span>洗发 美妆</span></a></li>
                    <li><a href="#">孕婴<span>奶粉 玩具</span></a></li>
                    <li><a href="#">服饰<span>男装 女装</span></a></li>
                    <li><a href="#">杂货<span>户外 图书</span></a></li>
                    <li><a href="#">品牌<span>品牌制造</span></a></li>
                </ul>
            </div>


            <!-- 箭头 -->
            <!-- prev  上一个    next  下一个 -->
            <a href="#" class="prev"></a>
            <a href="#" class="next"></a>


            <!-- 圆点：当前状态：current/active -->
            <!-- js只需要找到用户点击的li 添加类名li变成白色的 -->
            <ol>
                <li></li>
                <li></li>
                <li class="current"></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>

    <!-- 新鲜好物 -->
    <div class="goods wrapper">
        <!-- hd header 头部 -->
        <div class="hd">
            <h2>新鲜好物
                <span>新鲜出炉 品质靠谱</span>
            </h2>
            <a href="#">查看全部</a>
        </div>
        <!-- body 身体，内容 -->
        <div class="bd clearfix">
            <!--clearfix忘了防止浮动影响其他标准流  -->
            <ul>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>无线吸尘器</h3>
                        <div>￥<span>899</span></div>
                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_2.jpg" alt="">
                        <h3>智能环绕3D空调</h3>
                        <div>￥<span>1299</span></div>
                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_3.jpg" alt="">
                        <h3>广东软软糯米煲仔饭</h3>
                        <div>￥<span>129</span></div>
                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_4.jpg" alt="">
                        <h3>罗西机械智能手表</h3>
                        <div>￥<span>3399</span></div>
                        <b>新品</b>
                    </a>
                </li>
            </ul>
        </div>
    </div>


    <!-- 生鲜 -->
    <div class="shengxian wrapper">
        <div class="hd">
            <h2>生鲜</h2>
            <a href="#" class="more">查看全部</a>
            <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>
                <li><a href="#">水果</a></li>
            </ul>
        </div>
        <div class="bd clearfix">
            <div class="left">
                <a href="#">
                    <img src="./uploads/fresh_goods_cover.png" alt="">
                    
                </a>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h3>三文鱼</h3>
                            <div>￥<span>3399</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_2.jpg" alt="">
                            <h3>三文鱼</h3>
                            <div>￥<span>3399</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_3.jpg" alt="">
                            <h3>三文鱼</h3>
                            <div>￥<span>3399</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_4.jpg" alt="">
                            <h3>三文鱼</h3>
                            <div>￥<span>3399</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_5.jpg" alt="">
                            <h3>三文鱼</h3>
                            <div>￥<span>3399</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_6.jpg" alt="">
                            <h3>三文鱼</h3>
                            <div>￥<span>3399</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_7.jpg" alt="">
                            <h3>三文鱼</h3>
                            <div>￥<span>3399</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_8.jpg" alt="">
                            <h3>三文鱼</h3>
                            <div>￥<span>3399</span></div>
                        </a>
                    </li>

                </ul>
            </div>
        </div>
    </div>


    <!-- 版权区域 -->
    <div class="footer">
        <div class="wrapper">
            <div class="top">
                <ul>
                    <li>
                        <!-- 通过伪元素添加标签实现精灵图 -->
                        <span>价格亲民</span>
                    </li>
                    <li>
                        <span>物流快捷</span>
                    </li>
                    <li>
                        <span>品质新鲜</span>
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <p>
                    <a href="#">关于我们</a> |
                    <a href="#">帮助中心</a> |
                    <a href="#">售后服务</a> |
                    <a href="#">配送与验收</a> |
                    <a href="#">商务合作</a> |
                    <a href="#">搜索推荐</a> |
                    <a href="#">友情链接</a> 
                </p>
                <p>
                    小苏 @ 我的网页
                </p>
            </div>
        </div>
    </div>
</body>
</html>

base基础css默认设置

/* 清除默认样式的代码 */
/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
    
    
  margin: 0;
  padding: 0;
}

/* 內减模式 */
* {
    
    
    box-sizing: border-box;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
    
    
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

/* 去除列表默认样式 */
ul,
ol {
    
    
  list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
    
    
  font-style: normal;
}

/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
    
    
  text-decoration: none;
  color: #333;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
    
    
  vertical-align: middle;
}

/* 去除input默认样式 */
input {
    
    
  border: none;
  outline: none;
  color: #333;
}

/* 左浮动 */
.fl {
    
    
  float: left;
}

/* 右浮动 */
.fr {
    
    
  float: right;
}

/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
    
    
  content: "";
  display: table;
}
.clearfix::after {
    
    
  clear: both;
}

common通用设置

/* 放各个页面相同的样式表：头尾 */
/* 版心 */
.wrapper{
    
    
    width: 1240px;
    margin: 0 auto;
}

/* 快捷导航 */
.shortcut{
    
    
    height: 52px;
    background-color: #333;
}

.shortcut .wrapper{
    
    
    height: 52px;
    
}
.shortcut .wrapper ul{
    
    
    float: right;
}

.shortcut .wrapper li{
    
    
    float: left;
    line-height: 52px; 
}

.shortcut .wrapper a{
    
    
    padding:0 16px;
    border-right: 1px solid #666;

    font: size 14px;
    color: #dcdcdc;
}

.shortcut .wrapper a span{
    
    
    display: inline-block;
    margin-right: 8px;
    width: 11px;
    height: 16px;
    background-image: url(../images/sprites.png);
    background-position: -160px -70px;


    vertical-align: middle;
}


/* 头部 */
.header {
    
    
    margin:30px auto;
    height: 70px;
    /* background-color: pink; */
}

.logo{
    
    
    float: left;
    width: 207px;
    height: 70px;
    /* background-color: pink; */
}

/* logo搜索引擎优化做法 */
.logo h1{
    
    
    width: 207px;
    height: 70px;
}

.logo h1 a{
    
    
    display: block;
    width: 207px;
    height: 70px;
    background-image: url(../images/logo.png);
    background-size: contain;
    /* 目的：让h1里面的字看不见 */
    font-size: 0;
}


.nav{
    
    
    float: left;
    margin-left: 40px;
    height: 70px;
    /* background-color: pink; */
}

.nav li{
    
    
    float: left;
    margin-right: 48px;
    line-height: 70px;
}

.nav li a{
    
    
    padding-bottom: 7px;
}
.nav li a:hover{
    
    
    color: #27ba9b;
    border-bottom: 1px solid #27ba9a;
}


.search{
    
    
    position: relative;
    float: left;
    margin-top: 24px;
    margin-left: 34px;
    width: 172px;
    height: 30px;
    border-top: 2px solid #e7e7e7;
    /* background-color: green; */
}

.search input{
    
    
    padding-left: 30px;
    width: 172px;
    height: 28px;
}

.search input::placeholder:hover{
    
    
    font-size: 14px;
    background-color: #ccc;
}

.search span{
    
    
    
    position: absolute;
    left: 2px;
    top: 0;
    /* display: inline-block; */
    width: 18px;
    height: 18px;
    /* background-color: pink; */
    background-image: url(../images/sprites.png);
    background-position: -79px -69px;
}

.car{
    
    
    position: relative;
    float: left;
    margin-top: 28px;
    margin-left: 15px;
    width: 23px;
    height: 23px;
    /* background-color: skyblue; */
    background-image: url(../images/sprites.png);
    background-position: -119px -69px;
}
.car span {
    
    
    /* 因为这里是绝对定位，盒子具备行内块特点 */
    position: absolute;
    right: -13px;
    top: -6px;
    width: 20px;
    height:15px ;
    background-color: #e26237;
    border-radius: 8px;

    font-size: 13px;
    color: #fff;
    text-align: center;
}


/* 版权footer */
.footer{
    
    
    height: 342px;
    background-color: #333;
    
}


.footer .wrapper{
    
    
    width: 1393px;
    
}

.footer  .top{
    
    
    padding-top: 59px;
    padding-bottom: 135px;
    height: 175px;
    border-bottom: 1px solid #434343;

}

.footer .top li{
    
    
    position: relative;
    float: left;
    margin-right: 300px;
    width: 195px;
    height: 58px;
    /* background-color: pink; */
}

.footer .top li:last-child{
    
    
    margin-right: 0;
}

/* 如果行内块和行内文字无法通过vertical-align或行高对齐,
定位
 */
.footer .top li::before{
    
    
    position: absolute;
    /* display: inline-block; */
    left: 0;
    top: 0;
    content: '';
    width: 58px;
    height: 58px;
    background-image: url(../images/sprites.png);
    vertical-align: middle;
}

.footer .top li span{
    
    
    margin-left: 77px;
    font-size: 28px;
    color: #fff;
}

/* 第二个li里面的before添加背景图位置属性 */
.footer .top li:nth-child(2)::before{
    
    
    background-position: -64px 0;
}

.footer .top li:nth-child(3)::before{
    
    
    background-position: -130px 0;
}

.footer .bottom {
    
    
    padding-top: 40px;
    font-size: 14px;
    color: #999;
    text-align: center;
}

.footer .bottom a{
    
    
    font-size: 14px;
    color: #999;
}

.footer .bottom p{
    
    
    margin-bottom: 20px;
}

index页面css设置

/* 放index页面的样式表 */
.banner{
    
    
    
    height: 500px;
    background-color: #f5f5f5;
}

.banner .wrapper{
    
    
    position: relative;
    height: 500px;

}

/* 侧导航 */
.banner .aside{
    
    
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 500px;
    background-color: rgba(0,0,0,.8);
}

.banner .aside li{
    
    
    height: 50px;
    line-height: 50px;
}

.banner .aside a{
    
    
    position: relative;
    padding-left: 35px;
    padding-right: 19px;
    /* 行内元素，宽高不能生效，所以要display  
    宽度和父级一样 */
    display: block;
    /* width: 250px; */
    height: 50px;
    /* background-color: pink; */

    color: #fff;
}

.banner .aside a span{
    
    
    margin-left:  15px; ;
    font-size: 14px;
}

.banner .aside a:hover{
    
    
    background-color: #27ba9b;
}

/* 在a里面最后的位置添加一个箭头 */
.banner .aside a::after{
    
    
    position: absolute;
    right: 19px;
    top: 19px;
    content: "";
    width: 6px;
    height: 11px;
    background-image: url(../images/sprites.png);
    background-position: -80px -110px;
}


/* 箭头 */
.prev,
.next {
    
    
    position: absolute;
    top: 228px;
    width: 45px;
    height: 45px;
    background-color: rgba(0,0,0,.2);
    background-image: url(../images/sprites.png);
    
    border-radius: 50%;
}

/* 背景图位置负责2件事:改变箭头在盒子里面的位置，改变精灵图的位置*/
/* 背景图位置负责2件事:改变箭头在盒子 */
/* 解决方案有2种
    1.书写背景图位置属性,借助谷歌的调试工具调试具体的位置数值
    2.书写称签的时候,a负贡盒于,里口再添加一个span负责箭头
 */
.prev{
    
    
    left: 260px;
    background-position: 14px -60px;
}

.next{
    
    
    right: 10px;
    background-position: -22px -60px;
}

/* 圆点 */
.banner ol{
    
    
    position: absolute;
    bottom: 30px;
    left: 680px;
    height: 10px;
    /* background-color: pink; */
}

.banner ol li {
    
    
    float: left;
    margin-left: 24px;
    width: 10px;
    height: 10px;
    /* background-color: green; */
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    /* 变小手鼠标箭头*/
    
}

.banner ol .current{
    
    
    background-color: #fff;
}


/* 新鲜好物 */
.goods .hd{
    
    
    height: 114px;
    /* background-color: pink; */
    line-height: 114px;

}

.goods .hd h2{
    
    
    float: left;
    height: 114px;
    font-size: 29px;
    font-weight: 400px;
}

.goods .hd h2 span{
    
    
    margin-left: 34px;
    font-size: 16px;
    color: #999;
}

.goods .hd a,
.shengxian .hd .more{
    
    
    float: right;
    color: #999;
    
}

.goods .hd a::after,
.shengxian .hd .more::after{
    
    
    display: inline-block;
    content: "";
    width: 7px;
    height: 13px;
    background-image: url(../images/sprites.png);
    background-position: 0 -110px;
    margin-left: 13px;
    vertical-align: middle;
}


.goods .bd li{
    
    
    position: relative;
    float: left;
    margin-right: 8px;
    width: 304px;
    height: 405px;
    background-color: #f0f9f4;
    text-align: center;
}
/* 到这里4个li，一个li掉到第二行，原因为hd中的h2他和高为117，
但父级hd高为114，所以li被挤下去一个 */
/* 解决方法 ：将h2高设置一下*/
/* li还是掉下去的原因是最后一个右边距应该没有，
但上面直接全部设置了，
所以需要清除一下最后一个li */
.goods .bd li:last-child{
    
    
    margin-right: 0;
}

.goods .bd li img{
    
    
    width: 304px;
}

.goods .bd li h3{
    
    
    margin-top: 20px;
    margin-bottom: 1px;
    font-size: 20px;
    font-weight: 400;
}

.goods .bd li div{
    
    
    color: #9a2e1f;
    font-size: 17px;
}

.goods .bd li span{
    
    
    font-size: 23px;
}

.goods .bd li b{
    
    
    position: absolute;
    left: 17px;
    top: 18px;
    width: 28px;
    height: 51px;
    border: 1px solid #27ba9b;
    border-radius: 2px; 
    color: #27ba9b;
    font-size: 18px;
    font-weight: 400;
    line-height:  24px; 
}


.shengxian .hd{
    
    
    height: 96px;
    /* background-color: pink; */
    line-height: 96px;
}

.shengxian .hd h2{
    
    
    float: left;
    font-size: 29px;
    font-weight: 400;
}

.shengxian .hd .more{
    
    
    float: right;
}

.shengxian .hd ul{
    
    
    float: right;
    margin-right: 65px;
}

.shengxian .hd li {
    
    
    float:left ;
}

.shengxian .hd li a{
    
    
    padding: 2px 7px;
    margin-left: 6px;
}

.shengxian .hd li a:hover{
    
    
    background-color: #27ba9b;
    color: #fff;
}

.shengxian .bd .left {
    
    
    float: left;
    width: 240px;
    height: 610px;
    /* background-color: pink; */
}

.shengxian .bd .right{
    
    
    float: left;
    width: 1000px;
    height: 610px;
    /* background-color: skyblue; */
}

.shengxian .bd .right li{
    
    
    padding: 8px 29px 112px;
    float: left;
    width: 242px;
    height: 292px;
    margin-left: 8px;
    background-color: #ffffff;
    text-align: left;

    margin: 4px;

    
}

.shengxian .bd .right li img{
    
     
    width: 184px;
}
.shengxian .bd .right li h3{
    
    
    margin-top: 12px;
    margin-bottom: 1px;
    font-size: 14px;
    font-weight: 166;
    font-size: 10px;
}

.shengxian .bd .right li div{
    
    

    color: #9a2e1f;
    font-size: 17px;
}

.shengxian .bd .right li span{
    
    
    
    font-size: 16px;
}


.shengxian .bd .right li a:hover{
    
    
    background-color: #27ba9b;
    color: #fff;
}

4. JavaScript基础

4.1 基础语法

4.1.1 JavaScript介绍

作用：

  • 网页特效(监听用户的一些行为让网页作出对应的反馈)
  • 表单验证(针对表单数据的合法性进行判断)
  • 数据交互(获取后台的数据,渲染到前端)
  • 服务端编程(node.js)

JavaScript=ECMAScript+web APLs(DOM,BOM)

JavaScript书写位置

  1. 内部JavaScript

    直接写在html文件里，用script标签包住

    规范: script标签写在上面

    拓展: alert(‘你好，js’)页面弹出警告对话框

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>123</h1>
    <!-- 书写位置 -->
    <script>
        alert("你好，js")
    </script>
</body>
</html>

  2. 外部JavaScript

    代码写在以.js结尾的文件里

    语法:通过script标签，引入到html页面中。

    注意：

    • script标签中间无需写代码，否则会被忽略!

    • ​ 外部JavaScript会使代码更加有序，更易于复用，且没有了脚本混合，HTML也会更加易读，因此这是个好的习惯。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>123</h1>
    <!-- 内部js
    <script>
        alert("你好，js")
    </script> -->
    <!-- 外部js -->
    <script src="./my.js"></script>
</body>
</html>

  3. 内联Javascript

    代码写在标签内部

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('月薪过万')">点击我</button>
    <h1>123</h1>
    <!-- 内部js
    <script>
        alert("你好，js")
    </script> -->
    <!-- 外部js -->
    <!-- <script src="./my.js"></script> -->
</body>
</html>

结束符

  • 代表语句结束
  • 英文分号;
  • 可写可不写（现在不写结束符的程序员越来越多)
  • 换行符（回车）会被识别成结束符,所以一个完整的语句，不要手动换行
  • 因此在实际开发中有许多人主张书写JavaScript 代码时省略结束符
  • 但为了风格统一，要写结束符就每句都写，要么每句都不写（按照团队要求.)

输入和输出语法

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

1.输出语法

document.write("要输出的内容")
  • 向body内输出内容
  • 如果输出的内容写的是标签，也会被解析成网页元素
alert('要输出的内容')
  • 页面弹出警告对话框
console.log('控制台打印')
  • 控制台输出语法，程序员调试使用

字面量

在计算机科学中，字面量( literal)是在计算机中描述事/物

比如:

  • 我们工资是:1000此时1000就是数字字面量
  • '黑马程序员′字符串字面量
  • 还有接下来我们学的 [] 数组字面量 {}对象字面量等等

4.1.2 变量

变量是计算机存储数据的容器

1.声明变量:

要想使用变量，首先需要创建变量（专业说法:声明变量)

语法:

let 变量名

声明变量

  • 有两部分构成:声明关键字、变量名（标识)
  • let 即关键字(let:允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义)变量的词语

变量赋值

  • 定义了一个变量后，你就能够初始化它（赋值)。在变量名之后跟上一个“=”，然后是数值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // let声明变量，age是变量
        // let age
        // age = 18
        // console.log(age)

        // 变量的初始化
        // let age = 18
        // console.log(age);

        let age = 18,uname = "1111"
    </script>
</body>
</html>

案例1:用户输入姓名

  1. 输入：用户输入框：prompt()
  2. 内部处理：保存数据
  3. 输出：页面打印 document.write()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       let uname = prompt('请您输入姓名：')
       document.write(uname)
    </script>
</body>
</html>

案例2：交换变量的值

需求:

  • 有2个变量: num1里面放的是10, num2里面放的是20最后变为num1里面放的是20 , num2里面放的是10

目的:

  1. 练习变量的使用
  2. 为了后面冒泡排序做准备

思路

  1. 利用一共临时变量用作中间存储
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num1 = 10
        let num2 = 20
        let temp 
        temp = nmu1 
        num1 = num2 
        num2 = temp
        console.log(num1,num2)
    </script>
</body>
</html>

变量的本质

内存:计算机中存储数据的地方，相当于一个空间
变量:是程序在内存中申请的一块用来存放数据的小空间

变量的命名规则和规范

规则:必须遵守，不遵守报错

规范:建议，不遵守不会报错，但不符合业内通识

规则:

  • 不能用关键字
    • 关键字:有特殊含义的字符，JavaScript内置的一些英语词汇。例如:let、var、if、for等
  • 只能用下划线、字母、数字、$组成，且数字不能开头
  • 字母严格区分大小写，如Age和age是不同的变量

规范:

  • 起名要有意义
  • 遵守小驼峰命名法
    • 第一个单词首字母小写，后面每个单词首字母大写。例:userName

拓展

数组（Array)是一种可以按照顺序保存多个数据

let 数组名 = [数组1,数组2,数组3,数组4,数组5]

数组是按顺序保存，所以每个数据都有自己的编号

计算机中的编号从O开始，所以小明的编号为0，小刚编号为1，以此类推

在数组中，数据的编号也叫索引或下标

数组名[下标]

4.1.3 数据类型

基本数据类型

number 数字型
string 字符串类型
boolean 布尔型
undefined 未定义型
null 空类型

字符串中必要时可以使用转义符\，输出单引号或双引号

模板字符串

作用

拼接字符串和变量

在没有它之前，要拼接变量比较麻烦

符号

  • ``
  • 在英文输入模式下按键盘的tab键上方那个键（1左边那个键)
  • 内容拼接变量时,用${}包住变量
document.write(`大家好，我叫${.name},今年${age}岁`)

引用类型

object 对象
function 函数
array 数组

检测数据类型

通过typeof关键字检测数据类型

console.log(typeof 123)
console.log(typeof '123')

4.1.4 类型转换

JavaScript是弱数据类型: JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。

坑:使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

隐式转换

规则:

  • ＋号两边只要有一个是字符串，都会把另外一个转成字符串
  • 除了+以外的算术运算符比如–*!等都会把数据转成数字类型

缺点:

  • 转换类型不明确，靠经验才能总结

小技巧:

  • +号作为正号解析可以转换成Number
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let number = prompt('请输入一个数字')
        console.log(number,typeof number)
        // 内部会将数字10转换成字符串10
        console.log('10'+10)
        // - * / 内部会自动将字符串转换成数字10
        console.log(10*'10');

        // 小技巧  +号作为正号解析可以转换成Number
        let num = '100'
        console.log(num)
        console.log(+num);

        console.log(10  +"10");
        // =20
    </script>
</body>
</html>

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

概念:

自己写代码告诉系统该转成什么类型

转换为数字型

  • Number(数据)
    • 转成数字类型
    • 如果字符串内容里有非数字，转换失败时结果为NaN (Not a Number）即不是一个数字
    • NaN也是number类型的数据，代表非数字
  • parselnt(数据)
    • 只保留整数
  • parseFloat(数据)
    • 可以保留小数

转换为字符型

  • String(数据)
    • 变量.toString(进制)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num = '10'
        console.log(Number(num));
        // 转换成数字型，只保留整数，没有四舍五入
        console.log(parseInt('10.99'));
        console.log(parseFloat('10.9999'));

        // 区别
        // number()只能放数字类型的字符，不能放abc这种的字符
        // 或者返回NaN   not a nmuber
        console.log('10.10abc');
        // 经常用于过滤单位
        console.log(parseFloat('10.99abc'));

        console.log(String(10));
        let str = 10
        console.log(str.toString());
        // 转换成2进制
        console.log(str.toString(2));

    </script>
</body>
</html>

4.1.5 运算符

算术运算符

同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。

  • 乘、除、取余优先级相同
  • 加、减优先级相同
  • 乘、除、取余优先级大于加、减
  • 使用()可以提升优先级
  • 总结:先乘除后加减，有括号先算括号里面的

一元运算符

  • 自增:
    • 符号:++
    • 作用:让变量的值+1
  • 自减:
    • 符号:–
    • 作用:让变量的值-1

使用场景：

  • 经常用于计数来使用。比如进行10次操作，用它来计算进行了多少次了

前置自增

  • 先自加再使用

后置自增

  • 先使用再自加
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let i = 1
        console.log(++i =2)
        // 过程：
        // 1.1+1=2
        // 2.2+2=4


        let s = 1
        console.log(s++ +2)
        // 过程
        // 1.1+2=3   s+2
        // 2.1+1=2   ++s
    </script>
</body>
</html>

前置自增和后置自增独立使用时二者并没有差别!

一般开发中我们都是独立使用

后面i++后置自增会使用相对较多

比较运算符

> 左边是否大于右边
< 左边是否小于右边
>= 左边是否大于或等于右边
<= 左边是否小于或等于右边
== 左右两边是否相等
=== 左有两边是否类型和值都相等
!== 左右两边是否不全等
  • 比较结果为boolean类型，即只会得到true或false
  • 字符串比较，是比较的字符对应的ASCII码
    • 从左往右依次比较
    • 如果第一位一样再比较第二位，以此类推
    • 比较的少，了解即可
  • NaN不等于任何值,包括它本身

逻辑运算符

符号 名称 日常读法 特点
&& 逻辑与 并且 符号两边都为true结果才为true
|| 逻辑或 或者 符号两边拥有一个true就为true
! 逻辑非 取反 true变false
false变true

运算符优先级

优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ … !
3 算术运算符 先* / % 后+ -
4 关系运算符 < > <= >=
5 相等运算符 == === !==
6 逻辑运算符 先&& 后||
7 赋值运算符 =
8 逗号运算符 ，

4.1.6 语句

表达式和语句

  • 表达式:

    表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果

  • 语句

    js 整句或命令，js 语句是以分号结束（可以省略)比如:if语句for循环语句

  • 区别

    表达式计算出一个值，但语句用来自行以使某件事发生(做什么事)

分支语句

if语句

if(){
	满足条件要执行的代码
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        if (true) {
      
      
            alert(11)
        }
        // false  0  ''  undefined  null  NaN都是假
        if (3 > 5) {
      
      
            alert(22)
        }
    </script>
</body>
</html>

if(条件){
	满足条件要执行的代码
}
else{
	不满足条件要执行的代码
}


if(条件1){
	代码
}
else if(条件2){
	代码
}
else{
	代码
}

三元运算符

语法：

  • 条件？满足条件执行的代码：不满足条件执行的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // console.log(true ? 1 : 2);
        // console.log(false ? 1 : 2);


        // 3 > 5 ? alert("第一个"): alert("第二个")
        let num = prompt('请您输入一个数字：')
        let t = num >= 10 ? num : '0' + num
        document.write(t)

        let num1 = +prompt("请输入第一个数字:")
        let num2 = +prompt("请输入第二个数字：")
        let re = num1 > num2 ? num1 : num2
        // 模块字符串
        // 上面加一个加号是将字符串直接变成整数型
        document.write(`两个数最大的那个是${ 
        re}`)
    </script>
</body>
</html>

switch语句

switch(数据){
	case 值1:
		代码
		break
	case 值1:
		代码
		break
	default:
		代码
		break
}

释义:
找到跟小括号里数据全等的case值，并执行里面对应的代码

若没有全等===的则执行default里的代码

例:数据若跟值2全等，则执行代码2

  1. switch case语句一般用于等值判断,不适合于区间判断
  2. switch case一般需要配合break关键字使用没有break会造成case穿透
循环语句
while(循环条件){
	要重复执行的代码(循环体)
}
  • 跟if语句很像，都要满足小括号里的条件为true才会进入执行代码
  • while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

注意事项：

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程

所以，循环需要具备三要素:

  1. 变量起始值
  2. 终止条件（没有终止条件，循环会一直执行，造成死循环)
  3. 变量变化量（用自增或者自减)
for 循环
for(声明记录循环次数的变量;循环条件;变化值){
	循环体
}



for(声明记录循环次数的变量;循环条件;变化值){
	for(声明记录循环次数的变量;循环条件;变化值){
		循环体
	}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // for (let i = 1; i<= 10; i++){
      
      
        //     document.write("月薪过万<br>")

        arr = ["马超",'黄忠','李白','火舞']
        document.write(arr.length,'<br>' )
        
        for (let i = 0;i <=arr.length -1; i++){
      
      
            document.write(`名字是: ${ 
        arr[i]} <br>`)
        }
        
    </script>
</body>
</html>

退出循环

continue:结束本次循环，继续下次循环

break:跳出所在的循环

4.1.7 数组

数组(Array)是一种可以按顺序保存数据的数据类型

let 数组名 = [数据1，数据2，数据3,...,数据n]
  • 数组是按顺序保存，所以每个数据都有自己的编号
  • 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
  • 在数组中，数据的编号也叫索引或下标
  • 数组可以存储任意类型的数据
    • 元素:数组中保存的每个数据都叫数组元素
    • 下标:数组中数据的编号
    • 长度:数组中数据的个数，通过数组的length属性获得

操作数组

数组本质是数据集合,操作数据无非就是增删改查

语法:

  • 数组添加新的数据

    arr.push(新增的内容)

    arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

  • 删除数组中数据arr.pop()
    arr.shift()
    arr.splice(操作的下标,删除的个数)

  • 重新赋值
    数组[下标]=新值

  • 查询数组数据
    数组[下标]
    或者我们称为访问数组数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr = ['ab','adad','ajiaj']
        // 查询
        console.log(arr[0])
        // 改
        arr[0] = 'hhk'
        console.log(arr)
        // 增加
        arr.push('asjka')
        console.log(arr)
        arr.unshift('adad','adaadaa')
        console.log(arr)
        // 删除 删除最后一个
        arr.pop()

    </script>
</body>
</html>

冒泡排序

冒泡排序是一种简单的排序算法。
它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。比如数组[2,3,1,4,5]经过排序成为了[1,2,3,4,5]或者[5,4,3,2,1]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr = [3 , 4 , 0, 2, 9]
        // 外层循环控制趟数循环4次arr.Length - 1
        for (let i = 0; i< arr.length-1; i++){
      
      
            // 里层的循环控制一趟交换几次arr.length - i - 1次数
            for (let j = 0; j<arr.length - i - 1;j++){
      
      
                if(arr[j] > arr[j+1]){
      
      
                    let temp = arr[j]
                    arr[j] = arr[j+1]
                    arr[j+1] = temp!
                }
            }
        }
        console.log(arr);
    </script>
</body>
</html>

4.1.8 函数

function，是被设计为执行特定任务的代码块

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的是有利于精简代码方便复用。

函数的声明语法

function  函数名(){
	函数体
}

function sayhi(){
	document.write('hai~')
}
  • 函数名命名规范
    • 和变量命名基本一致
    • 尽量小驼峰式命名法
    • 前缀应该为动词
    • 命名建议:常用动词约定
动词 含义
can 判断是否可执行某个动作
has 判断是否含义某个值
is 判断是否为某个值
get 获取某个值
set 设置某个值
load 加载某些数据

函数的调用语法

//函数调用,这些函数体内的代码逻辑会被执行
函数名()

注意:声明（定义）的函数必须调用才会真正被执行，使用()调用函数

目的:通过这段代码封装成函数，体会函数的好处

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        function sayHi(){
      
      
            document.write('hi~')
        }
        sayHi()
    </script>
</body>
</html>

函数传参

声明语法

function 函数名(){
	函数体
}


函数名(传递的参数列表)

参数列表

  • 传入数据列表
  • 声明这个函数需要传入几个数据
  • 多个数据用逗号隔开

形参与实参

  • 形参:声明函数时写在函数名右边小括号里的叫形参（形式上的参数)
  • 实参:调用函数时写在函数名右边小括号里的叫实参（实际上的参数)
  • 形参可以理解为是在这个函数内声明的变量（比如num1 = 10）实参可以理解为是给这个变量赋值
  • 开发中尽量保持形参和实参个数一致

函数返回值

用return返回数据

当函数需要返回数据出去时，用return关键字

语法

return 数据

细节:

  • 在函数体中使用return关键字能将内部的执行结果交给函数外部使用
  • 函数内部只能出现1次return，并且return后面代码不会再被执行，所以return后面的数据不要换行写
  • return会立即结束当前函数
  • 函数可以没有return，这种情况函数默认返回值为undefined

返回多个值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function fn(x,y){
      
      
        let jia = x+y
        let jian = x-y

        return [jia,jian]
    }
    let re = fn(1,2)
    document.write(`相加:${ 
        re[0]},相减:${ 
        re[1]}`)
    </script>

</body>
</html>

作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

全局作用域

  • 全局有效，作用于所有代码执行的环境(整个script标签内部)或者一个独立的js文件

局部作用域

  • 局部有效，作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

块级作用域

  • {}内有效，块作用域由{}包括,if语句和for语句里面的{}等
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- script算全局作用域 -->
    <script>
        let num = 0
        console.log(11)
        // 定义函数算局部作用域
        function fn(){
      
      
            // 块级作用域
            for (let i = 1; i<=10; i++) {
      
      
                document.write('sb')
            }
        }
    </script>
</body>
</html>

变量的作用域

在JavaScript中，根据作用域的不同，变量可以分为

全局变量

  • 函数外部let的变量，全局变量在任何区域都可以访问和修改

局部变量

  • 函数内部let的变量，局部变量只能在当前函数内部访问和修改

块级变量

  • {}内部的let变量，let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问
let num = 10
function fn() {
    
    
	let num = 20
	console.log(num)
}
fn()

变量访问原则-作用域链

  • 只要是代码，就至少有一个作用域
  • 写在函数内部的局部作用域
  • 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
  • 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

出现变量冲突时，变量会按照就近原则

匿名函数

function() {
    
    }


let fn = function(){
    
    
    //函数体
}

函数传参赋值小技巧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function fn(x, y) {
      
      
            x = x || 0
            y = y || 0
            console.log(x + y)
        }
        fn(1, 2)
        // x和y可以看做是 函数内部的局部变量
        // 调用的时候会有个内部的判断是否有参数传过来
        // 没有参数 则 执行 x=0，有则执行 实参赋值
        function fn (x=0 , y = 0) {
      
      
            console.log(x + y)
        }
        fn()
        fn(3,5)
    </script>
</body>
</html>

4.19 对象

对象（object）：javascript里的一种类型(可以理解成是一种无序的数据集合)

可以分为静态特征(可以使用数字，字符串，数组，布尔类型等表示)和动态特征（使用函数表示）

特点：

  • 无序的数据的集合
  • 可以详细的描述某个事物

操作对象

对象声明语法

let 对象 = {
    
    
    属性名:属性值,
    方法名:函数
}

let goods = {
    
    
    name:'小米10',
    num:'10000',
    weight:'0.55kg',
    address:'中国大陆'
}

对象有属性和方法组成

  • 属性：信息或特征（名词）
  • 方法：功能或叫行为（动词）

*属性访问

let person = {
    
    
    name:'andy',
    age:18,
    sex:'男'
}
//访问属性，得到值，对象.属性名
//访问属性，得到值，对象.['属性名'],特殊情况使用
 console.log(person.name);
 console.log(person.age);
 console.log(person['name']);
 console.log(person['age']);

对象使用

对象中的方法

let person = {
    
    
    name:'andy',
    sayHi:function(){
    
    
        documennt.write('Hi~~')
    }
}

1.方法是由方法名和函数两部分构成，它们之间使用∶分隔

2.多个属性之间使用英文，分隔

3.方法是依附在对象中的函数

4.方法名可以使用"“或”，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

 let person = {
    
    
        name:'andy',
        age:18,
        sex:'男',

        sayHi:function(){
    
    
            console.log('Hi~~')
        },
        mtv:function(s) {
    
    
            console.log(s)
        }
    }
    person.sgyHi()
    person.mtv('无间道')
    // document.write()

操作对象

对象本质是无序的数据集合，操作数据无非就是增删改查语法：

方法 语法
查询对象 对象.属性 或 对象[‘属性’]
对象.方法（）		 查
对象添加新的数据 对象名.新属性名 = 新值 增
重新赋值 对象.属性 = 值 改
删除对象中属性 delete 对象名.属性名 删 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let obj = {
      
      
            uname:'小明',
            age:18
        }
        console.log(obj.age);
        // 修改   对象.属性 = 新值
        obj.age = 81
        console.log(obj);
        obj.sex = '男'
        // 会去对象里面找是否有sex这个属性，如果有则更新修改
        // 会去对象里面找是否有sex这个属性，如果没有则新增这个属性
        obj.sing = function () {
      
      
            console.log('hi')
        }
        console.dir(obj)

        // 删除
        delete obj.uname
        consloe.dir(obj)
    </script>
</body>
</html>

遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let obj = {
      
      
            uname:'小明',
            age:18,
            sex:'男'
        }
        // for in 循环语句
        // 语法
        // for (let k in 对象){}  重点
        // k 是变量， k 或者 key   volue
        for (let k in obj) {
      
      
            console.log(k);
            // k遍历出属性名
            // 调用属性值
            console.log(obj.k); //找obj.k里面的k属性，obj里面没有k属性
            console.log(obj['k']);//找obj.k里面的k属性，obj里面没有k属性
            console.log(obj[k]);
            // k === 'uname'  ==='age'   ==='sex'
            // 因为k就已经是前面这样的了，本身就是字符串了，
            // 所以下面obj[k]里面不需要加''
            // obj[k]
        }
    </script>
</body>
</html>

内置对象

内置对象：JavaScript内部提供的对象，包含各种属性和方法给开发者调用

内置对象Math

Math对象是JavaScript提供的一个“数学高手”对象

提供了一系列做数学运算的方法

方法有:

random:生成0-1之间的随机数（包含O不包括1)

ceil:向上取整

floor:向下取整

max:找最大数

min:找最小数

pow:幂运算

abs:绝对值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(Math.PI);//圆周率
        console.log(Math.random());//返回一个随机数
        //返回一个小数
        console.log(Math.ceil(1.9));//向上取整  返回整数
        console.log(Math.floor(1.1));//向下取整，返回整数，   floor
        console.log(Math.round(1.9));//round 2
        console.log(Math.round(1.1));
        console.log(Math.round(1.5));//往小取整，负数则取大
    </script>
</body>
</html>

随机数

公式：Math.floor(MAth.random()*(m - n +1 )) + n

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // n-m之间的随机数
       let random = Math.floor(MAth.random() * (10 - 1 +1 )) + 1
       console.log(random);
    </script>
</body>
</html>

堆栈空间分配区别:

  1. 栈(操作系统）︰由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;
  2. 简单数据类型存放到栈里面
  3. 堆（操作系统）︰存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。引用数据类型存放到堆里面

Guess you like

Origin blog.csdn.net/qq_66970557/article/details/124899894
Recommended
Ranking
2019 JD pen questions - Choir
Grafana installation & basic configuration
How to solve the high gas fee of Filecoin? The official attitude is bright!
Informatization development 59
Date,DateFormat,Calendar,
Introduction to MySQL - Understanding MySQL
win10 conexão de área de trabalho remota ubuntu20 (RDP)
52. Customize generics on methods
Detailed explanation of CAP, ACID, BASE theory and NWR practice strategy
UnknownHostException：XXX：Name or service not know
Daily
More
2024-08-01(0)
2024-07-31(0)
2024-07-30(0)
2024-07-29(0)
2024-07-28(0)
2024-07-27(0)
2024-07-26(0)
2024-07-25(0)
2024-07-24(0)
2024-07-23(0)

Code World

© 2018 codetd.com