html网页的本质:以.html为后缀的纯文本文件

纯文本文件:只能老老实实的写文字,不能给文字添加样式

html标签的唯一作用:用来向浏览器解释其他普通文本的语义,不是用来设置样式的

国际上常见的浏览器: chrome  ie  fireFox  Opera  safari

浏览器内核:渲染引擎  绘制网页页面

web标准:w3c 组织   万维网联盟,制定和web相关的规则

– 规定浏览器如何显示网页

– 规定程序员如何编写网页

  web的组成:

  html   html标签 我们网页的骨架

   css    决定了网页的样式

    js      行为   (用户和网页的交互)

  结构 表现 行为相分离

– html: Hyper Text Marker Language   超文本标记语言

– html标签:

  书写格式分类:双标签  和 单标签

  双标签:

   <标签名>标签体 </标签名>    h系 p

  ​    前面的叫做开始(开放)标签  后面的叫做 结束(闭合)标签

     在浏览器中 标签体是真正展示出来的内容

  单标签:

   <标签名/>

  网页的基本格式:网页至少要具备的东西

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>

  </body>

  </html>

font用法

字体大小

font-size: 12px;

字体加粗

font-weight: 800;

字体样式

font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;

css中颜色有6种表达方式

分别为:

1、英文单词,例red,blue;

2、十六进制值,例#FF0000;

3、RGB,例RGB(255,0,0);

4、RGBA,例RGB(255,0,0,0.5);

5、HSL;

6、HSLA。

css中颜色的几种详细表达方式

选择器

快捷方式”.+类名”

<!-- .site-nav -->
      <div class="site-nav"></div>

快捷方式”.+类名.+类名”

<!-- .nav.mk -->
      <div class="nav mk"></div>

快捷方式”#+类名”

 <!-- #nav -->
      <div id="nav"></div>

快捷方式”#+类名.+类名”

<!-- #k.banxin -->
      <div id="k" class="banxin"></div>

9.1. 标签的三大分类

根据标签的【显示、排版】特征,官方把标签分为:

(1)块状标签;

(2)行内标签;

(3)和衍生出来的行内块标签;

9.2.第一大类、块级标签

(1)例如:html、body、header、footer、div、h1~h6、p、ul、ol、li等

(2)同一级的标签,从左上角开始,从上向下依次排列,各独占一行,即【竖排】

(3)标签的宽度,默认把父标签(上一级标签)横向【填满】;

(4)标签的高度,默认为标签内的内容的高度,当没有内容时为0;

(5)可以设置标签的宽度和高度;

(6)可以设置标签的上右下左四个方向的内外间距;

9.3.第二大类、行内标签

(1)例如:<a>、<span>、<b>、<i>、<em>等;

(2)同一级的标签,,从左上角开始,从左向右,行内依次排列,一行显示不下换行,即【行内横排】;

(3)标签的宽度和高度,为标签内的内容的宽高,当没有内容时宽为0;

(4)设置宽度和高度被浏览器忽略;

(5)只能设置标签左右两个方向的内外间距;

9.4.第三大类、行内块标签

(1)例如 :<img>、<input>、<button>等;

(2)可以在一行内横着排的块,即【行内横排的块】;

(3)除宽度默认由内容决定、横排外,其它跟块相同;

9.5.如何快速分辨一个标签的分类

(1)标签复制一份,各占一行则是块状标签;

(2)排成一行时,设置标签的高度,无效则是行内元素;

(3)否则是行内块。

9.6.标签的盒子模型知识要点

(1)浏览器为了计算并排版标签,把每一个标签都看作一个长方形的【盒子】,即盒子模型;

(2)一个盒子包括:

(2.1)盒子在排版时,四周要不要留空白间距呢?即盒子的【外间距】,英文margin;

(2.2)生活中的盒子,通常是有四个边的,标签也可有,即【边框】,英文border;

(2.3)盒子能盛放东西,需要为被盛放的东西预留多大空间呢?即【内容区】的【宽】和【高】,英文width和height;

(2.4)盒子内盛放的内容是挨着边框放,还是留点间距呢?即【内填充】,英文padding;

设置段落的最小宽度:

p
  {
  min-width:100px;
  }

outline用法

outline由三个子属性构成

outline:<'outline-width'> || <'outline-style'> || <'outline-color'>

1.简写属性:由若干个子属性简单的写到一起,构成一套属性

2.简写:

简写是在书写时不分前后顺序,,也可以只写一部分,或者写一两个也行,可以自由定义,其余属性默认值补齐。后写的子属性层叠覆盖先写的简写属性中的对应的属性例:

outline:3px dotted red;
outline:red 3px dotted;
outline:red;
outline:3px dotted;

文字去除下划线,和点

text-decoration: none;
  list-style: none;

padding和margin的区别

margin是外边距,即盒子与盒子之间的距离,

而padding是内边距,是盒子的边与盒子内部元素的距离。

margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin使元素与元素互不相干;padding让内容(文字)与(包裹)元素之间有一段“呼吸距离”。

margin是外边距,即盒子与盒子之间的距离,而padding是内边距,是盒子的边与盒子内部元素的距离。margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin使元素与元素互不相干;padding让内容(文字)与(包裹)元素之间有一段“呼吸距离”。

https://api2.mubu.com/v3/document_image/7521d130-5de0-43d2-bb96-fc0698e42fc7-4776272.jpg

css书写顺序

1.位置和结构属性(position, top, right, z-index, display, float等)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color,text-align等)

4.背景(background, border等)

5.其他(animation, transition等)

https://api2.mubu.com/v3/document_image/8b97bcf7-03fc-4306-beae-5a2292c85472-4776272.jpg

href

当超链接本地点击时。页面会刷新,为了避免不能有效跳转,造成页面刷新。添加JS代码javascript:void(0)

<a href="javascript:void(0)"></a>

  标签的关系:

  – 嵌套关系  父子关系

  – 并列关系  兄弟关系

  计算机语言(二进制) 0 1

  编程语言(高级语言): js  java  c  php

  字符集:

  ASCII   将所有可能出现的字母 和 符号转为二进制  形成一个表格   128 个

  unicode   万国码 基本包含了 世界上所有国家的语言  转为二进制   前128个还是ASCII

  常用的字符集:

  utf-8   万国码  8位的unicode  基本包含了 世界上所有国家的语言

  gb2312  包含简体中文 和一些常用的外文

  gbk   包含简体中文 和 繁体中文 和一些常用的外文

  # 一级标题

  ## 二级标题

  ### 333

常见标签

  1. 块级元素 可以设置宽高值,如果没有设置的话 宽度是父元素的100%,总是独占一行,块级元素占据其父元素(容器)的整个水平空间,垂直空间等于其内容高度,因此创建了一个“块”。这篇文章帮助解释这个概念。通常浏览器会在块级元素前后另起一个新行。
  • 行内元素 span, a, b, big, i, small, tt, abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var,a, bdo, br, img, map, object, q, script, span, sub, sup,button, input, label, select, textarea
  • 不能设置宽高值,可以和其他元素在同一行显示,默认从左向右依次排列,一行放不下的时候会自动换行

<address>
联系方式信息。
<article>
文章内容。
<aside>
伴随内容。
<blockquote>
块引用。
<dd>
定义列表中定义条目描述。
<div>
文档分区。
<dl>
定义列表。
<fieldset>
表单元素分组。
<figcaption>
图文信息组标题
<figure>
图文信息组 (参照 <figcaption>)。
<footer>
区段尾或页尾。
<form>
表单。
<h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US)
标题级别 1-6.
<header>
区段头或页头。
<hgroup>
标题组。
<hr>
水平分割线。

<ol>
有序列表。
<p>
行。
<pre>
预格式化文本。
<section>
一个页面区段。
<table>
表格。
<ul>
无序列表。
  • 行内块元素 input img 在行内元素中有几个特殊的标签 具备块级元素的特点 同时具备行内元素的特点 可以直接设置宽度 内外边距等属性 并可以和其他元素在同一行显示

元素的另一种分为类

  • 文本级元素 h 系 p 内部只能嵌套文字和行内元素 不要嵌套其他的块级元素了,特别是不能嵌套div 标签
  • 容器级元素 div 容器级的元素里面可以嵌套任何元素

常见的标签

h系

作用:设置标题

显示模式:块级元素 文本级元素

p

作用:设置 段落

显示模式:块级元素 文本级元素

div

作用:用来在页面中分割出一个区域

显示模式:是一个块级标签 没有语义 ,容器级的标签

span

作用:将页面中一些文字独立出来 ,没有语义

显示模式:行内元素 文本级的元素

br

作用:强制换行

单标签

hr

作用:设置分割线

块级元素

img

作用:在页面中添加图片

显示模式:行内块元素

特点:自带一些原生属性(可以直接在元素上设置的属性,天生)

相对路径绝对路径

  • src 设置显示图片的地址 得是一个完整的地址 ,图片是一个网络图片时 要有http或者https
    • 绝对路径
    • 网络资源 : 如网络图片 完整的url地址
    • 本地资源(自己电脑上的资源): 从盘符出发到目标文件的地址就是绝对路径 windows 系统下 路径分割符是 \ ,但是不推荐 使用\ ,推荐使用 /
    • 相对路径
    • 本地资源(自己电脑上的资源): 从文件本身出发到目标文件的路径就是相对路径 相对路径不能跨盘符找文件

./ 当前目录 可以省略   
../ 上一级目录
/ 当前盘符所在的根目录
- 使用技巧:本地文件使用相对路径  网络文件完整的url地址
  • alt 设置图片加载失败时的提示信息,读屏器读取
  • width 设置图片的额宽度
  • height 设置图片的高度 注意:图片都有原始的比例和尺寸,设置图片的宽高值和原图的比例不同时容易导致图片变形,所以在设置宽高的时候只设置一个即可 ,如:设置了width 高度会按照原比例自动计算
  • title 鼠标悬停时的提示信息 通用属性,在所有标签上都可以使用

通用属性(在所有标签上都可以使用):

​ id 设置标签的id名 身份证号 每一个元素的id名不能重名

​ class 设置标签的类名

​ title

​ style

网页的外链资源(需要向服务器单独发起请求的资源):图片 音频 视频 css js

完整的url地址:传输协议://域名:端口/文件路径?查询字符串#哈希

web相关的传输协议:http 和 https

当我们的外链资源的地址不全的时候 ,会按照当前文件的url地址自动补全

a标签
京东
作用:设置超链接 点击后可以跳转到制定的页面
显示模式:行内元素
特点:
– 有默认样式
– 未访问过的网页 默认的颜色是蓝色 访问过的颜色是紫色
– 下划线
– 默认行为
点击后可以跳转,并且刷新页面

    属性:
     href 设置要跳转到的目标页面的地址
     target 设置跳转新的页面的方式
          取值:_self   在当前的标签页进行跳转
               _blank   新开一个标签页进行跳转 
     title  

    假链接:点击后不会跳转的链接
    格式: - <a href="#">京东</a>  点击后会跳转到页面的最顶端
          - <a href="javascript:;">假链接2</a>  点击后不会跳到最顶端


    锚点链接:
      - 在当前页面跳转到指定位置
      - 跳转到其他页面的指定位置
    步骤:1 给目标元素设置id名
         2 告诉锚点链接要跳转到的目标位置  href="#目标位置的id名"
                                        href="目标文件的地址#目标位置的id名"

列表标签


– ul(unordered list) 无序列表 (使用最多)作用:给一堆数据添加 列表 语义,不是添加小圆点显示模式:块级标签
ul 和li 是一组标签,需要配合使用
ul 里面一般只能嵌套li标签,不要嵌套其他标签
li标签内可以嵌套任何标签

使用常景:新闻列表 导航栏 商品列表

– ol (order list) 有序列表
作用:给一堆数据添加 列表 语义,有序列表,列表中条目是有先后顺序之分的

排行榜

– dl (definition list) 定义列表

li (list item) 列表中的一个条目
显示模式:块级标签

<img src="./img/e.webp" alt="">
<a href="https://www.jd.com">京东</a>

定义列表 dl dt dd


dl: definition list
作用:设置一堆数据是为列表
dt definition title
作用:设置定义列表中小标题
dd definition description
作用:dd是对他前面最近的一个小标题做解释说明
每一个dt可以没有dd,也可以有多个dd做说明,推荐每一个dt只有一个dd做解释说明
dl dt dd 是一套组合标签,dl一般只有dt和dd,dt和dd里面可以任意的标签

使用场景:做图文混排

table
– 作用:给一堆数据添加表格语义
table 一个table标签就是一个表格
tr 一个tr就是表格里的一行
td 一个td就是行里的一个单元格

– 表格的基本结构:

  
        <table >
            <tr>
                <td>单元格</td>
            </tr>
        </table>
         table tr td 是一套组合标签 不要单独使用

    - 表格的大小默认是由内容撑开
    - 有两种单元格 : td 普通的单元格
                    th  表头里的单元格 默认 文字加错 居中


    - 表格的完整结构
        caption 表格的标题 始终相对于表格居中,可以嵌套标签
        thead  表头
        tbody  表体(必须要有的)表格的主要信息 没有设置时,浏览器会自动的加上
        tfoot  表尾

    - 合并单元格


表格的相关属性:设置在标签上的属性,暂时使用即可,后期可用css替代
border 表格的边框
align 属性可以使用在table tr td 标签上 取值:left center right
使用在table 表格在页面中水平对齐方式
tr 设置tr内所有的单元格的内容水平对齐方式
td 设置这一个单元格内容水平对齐方式
当td和tr上的align 作用在一个单元格上时,以td的为准

    valign 设置在tr td标签上  垂直对齐方式  取值:top center bottom
             tr   设置tr内所有的单元格的内容垂直方向的对齐方式
             td    设置这一个单元格内容垂直对齐方式

    cellspacing 设置单元格和单元格之间的距离  不能真正的实现细线边框

td 标签内可以嵌套任意的标签

合并单元格

  
   - 水平方向合并单元格 colspan  (colunm 列)  
      colspan='n' 将这一个单元格在水平方向上 看作为n个单元格
      合并后 会有多余的单元格,将多出的单元格删除即可

   - 垂直方向合并单元格 rowspan  (row 行)
    rowspan='n' 将这一个单元格在垂直方向上 看作为n个单元格

   合并单元只能 向后 或者向下合并

   注意:thead,tfoot可以水平方向合并,不能垂直方向合并

文本格式化标签


b block 给文字加粗 没有语义,不推荐
i italic 使文字倾斜 没有语义,不推荐
s strikthrough 给文字添加中划线 没有语义,不推荐
u underline 给文字添加下划线 没有语义,不推荐

strong strong 强,效果和b标签一样 ,具有强调作用的语义,推荐使用
em emphasize 强调,和i的样式一样 ;作用:对重要的文字起到强调的效果
ins inseted 插入 和u的样式一样 ,作用:有语义,插入文字
del delete 删除 和s的样式一样 ,作用:告诉浏览器删除文字

        form 表单  作用:用来收集用户信息
        - form 一个form标签就是一个表单
        - 表单的基本格式:
         <form action="表单信息提交到的服务器地址" method="get">
            表单元素
            <input type="text">
        </form>

        - form标签的属性:
          - action:表单信息提交到的服务器地址
          - method:属性值为get时 收集到的表单信息会以get请求的方式提交到服务
                    get 请求传递参数的方式  将参数以?开头,以键值对的方式 拼接到服务器地址的后面
                    键值对: 键名=值 ,多个键值对之间使用&分割
                    将具有name属性的表单元素的name属性的值作为键名,以value属性的属性值作为键值对的值


        --------------------------  input

          input 标签
          - 显示模式:行内块元素,默认样式
          - input标签的常用属性:
            - name 表单提交时使用,具有name属性,这个表单元素的信息才能提交到服务器
            - value 用户输入的值 会自动的存储到value属性值,value可以设置默认值
            - placeholder 设置占位符,给用户提示信息
            -  autofocus  自动获取焦点  autofocus='autofocus' 属性名和属性值一样的时候可以只写一个
            - type属性 取值不同,表现不同  输入框  按钮  单选框 多选框
              - 单行输入框
                type为text ---》明文输入框
                      password---》 掩文输入框
              - 单选按钮




             - 按钮
                submit  ---》提交按钮 点击后就会进行表单上传的操作

        ------- label标签
        作用:将文字和输入框进行绑定
        步骤:将文件写在label标签内
              给label标签的for属性设置绑定的输入框的id名
              格式1: <label for="id名">账号:</label>  <input id="useName" type="text">
              格式2: 
                <label for="password">
                    密码:<input id="password" type="password" name="password123"> 后面的文字可以和input绑定了
                </label>
              <!-- input
        type   取值 为 radio ---》单选框   多选一
              一组单选框默认是不会互斥,想让这一组单选框互斥需要给这一组单选框设置相同的name属性

              单选框选中上传的时候 上传值 需要通过value属性
              单选框的默认选中  checked="checked"

    -->

下拉菜单

           

<select name="表单提交时的健名" id="">
   <optgroup label="组名">
      <option value="表单提交时的健值">下拉菜单展示出的选项</option>
   <optgroup/>
</select>

            selected 属性作用在option标签给 设置默认选中

<option value="郑州" selected>郑州</option>

            optgroup 标签给多个选项分组,label属性设置组名

<optgroup label="组名">
      <option value="表单提交时的健值">下拉菜单展示出的选项</option>
<optgroup/>

        – css3新增的表单元素属性“可以直接定义使用”

<input type="text" id="userName" name="userName" autofocus required />

            multiple  设置多选 可以作用的下拉菜单  文件选择…

            autofocus  自动聚焦

            placeholder  占位符

            required  必须项,表单提交时必填

onclick如何跳转到其他页面,Javascript跳转页面和打开新窗口等方法

如果是本页显示可以直接用location,方法如下:

①οnclick=“javascript:window.location.href=‘URL’”
②οnclick=“location=‘URL’”
③οnclick=”window.location.href=‘URL?id=100’”

☆如果页面中有frame可以将在location前面添加top.mainframe.frames[‘right_frame’].location

1.在原来的窗体中直接跳转用

onClick=”window.location.href=‘你所要跳转的页面’;”

2、在新窗体中打开页面用:

οnclick=”window.open(‘你所要跳转的页面’)”

3、返回上一页 ( 本地测试无效,服务器上可用)

window.history.back(-1);

返回

返回上一页

“>4、一些用法

按钮式:

直接跳转式:

开新窗口:

123

自动打开

多行输入框(文本域)


作用:设置多行输入框 用户可以无限输入 且会自动换行
cols=”30″ rows=”10″ 设置文本域显示的行数和列数,可以通过css设置文本域的大小默认值
有一个value属性,用户输入的值 自动存储到value属性内
文本域 默认用户是可以自动缩放大小的,我们可以在css中禁用 css中设置 resize: none;
maxlength=”n” 限制输入的最大长度
minlength=”n” 限制输入的最小长度 要有required

<textarea name="textareaValue" id="" required placeholder="请输入您的信息" maxlength="5" minlength="2"></textarea>

input

拾色器

<input name="color111" type="color">

选择文件

<input type="file" multiple>

日期-邮箱

<input type="date">
    <input type="email">

隐藏表单元素

“作用:在用户不知情的情况可以提交信息给服务”

<input type="hidden" name="hidden123" value="秘密">

提交按钮

“使用一张图片作为提交按钮”

<input type="image" width="50px" src="./d.webp">

只能输入数字 在移动端 会数字键盘

电话号: <input type="number" maxlength="5">

视频标签video

视频格式 有3种 mp4 ogg webm
所有的视频格式中,没有哪一个格式是所有浏览器都支持的

作用: 在页面中引入视频

  • 格式1:“不推荐”
<video src="要引入的视频文件的地址"></video> 
  • 格式2: 优点:可以给video标签指定多种不同格式的视频
<video controls>
        <source src="img/2105161743328001.mp4">
        <source src="img/2105161743328001.webm">
        <source src="img/2105161743328001.ogg">
     </video>
  • video标签的属性:
  • controls 音视频 默认没有控制条,需要设置controls属性
  • width 设置宽度
  • height 设置视频的高度 ,推荐宽高只设置一个,另一个会自动计算
  • autoplay 自动播放, 在一些浏览器(谷歌 火狐)上 有声音的音视频是禁止自动播放,为了用户体验,低版本的ie浏览器没有优化,想要自动播放需要和muted属性配合使用
  • muted 静音
  • poster=”视频的封面的引用地址” 设置视频的封面,设置封面的时候考虑尺寸
  • loop 循环播放
  • preload 预加载 在播放前加载视频 ,前提是不能设置 autoplay属性

三大快补充

一、块级标签

特点:
1、可以直接写宽高;
2、独占一行;
3、默认宽度是父级标签的宽度
4、一般用于作为容器布局 可以嵌套其他块级元素或者行内元素(p标签不要包裹其他块级元素)

哪些标签是块级标签?
div、p、h1-h6、ol、ul、li、dl、dt、dd、header、footer、nav、aside、article、section

二、行内元素
特点:
1、宽高对于行内元素没有作用
2、可以允许其他行内元素排成一排
3、内容有多大就撑多大,如果没有内容,那么没有大小
4、一般用来包裹文字或者做一些小的装饰(行内标签不要嵌套块级标签,a除外)
5、行内标签与display、float、position会擦除火花(行内标签会具有行内块级元素属性)

哪些是行内标签?
span、a、strong、ins、b、del、s、u、i、em

三、行内块标签
特点:
1、行内块标签其实本质上是一种特殊的行内标签(text-align和line-height都可以控制行内块元素)
2、允许其他的行内元素排一排
3、可以设置宽高

哪些是行内块标签?
img、input