博客

2021-8-9 WEB前端课堂笔记Day01

  • Post author:
  • Post category:其他




1 HTML



1.1 网页组成

文字、图片、链接、音频、视频等元素



1.2 WEB 前端开发流程

早期开发流程：

  • 美工（PS）：设计效果图
  • 前端工程师（HTML、CSS、JS等前端技术）：实现静态网页
  • java工程师：使用动态WEB技术，将静态页面变为动态页面

主流开发流程：

前后端分离

  • 美工：设计效果图
  • 前端工程师：实现静态网页，同时使用mock技术，实现页面的模拟测试
  • 后端工程师：开发接口

    • 前、后端需要协商后端接口的开发规范



1.3 WEB 标准（重点）

不同浏览器内核不同、工作原理不同、页面解析不同，因此显示上有差异

W3C制定浏览器的WEB标准



1.3.1 WEB标准的好处
  • 能被广泛设备访问
  • 更容易被搜索到
  • 降低网站流量费用
  • 网站易于维护
  • 提高页面浏览速度


1.3.2 WEB标准的构成

三个方面：结构、表现、行为

结构标准：对网页元素的分类和整理（HTML、XHTML等）

样式标准：网页元素的版式、颜色、大小等外观样式的设计（CSS）

行为标准：网页模型的定义和交互方式（）



2 HTML的认识

HTML：Hyper Text Markup Lanague（超文本标记语言）

HTML是通过标签来标记要显示的网页中的各个部分，网页本身是一种文本文件，通过文本文件添加标记符，可以告诉浏览器如何显示其中的内容（文字如何处理，页面如何排版，图片如何显示等）。



2.1 网页开发工具

IDEA 记事本 VSCode HBuilder



2.2 VSCode配置

  1. 主体配置 在管理（齿轮图标）中选择颜色主题，可选择自己想要的颜色
  2. 字号的配置 在管理中选择设置，在常用设置中可设置字体大小
  3. 插件配置
  • Chinese (Simplified) Language Pack for Visual Studio Code 汉化插件
  • HTML Snippets 可以提供HTML5的片段和提示
  • HTML CSS Support CSS的智能提示
  • Debugger for Chrome 映射chrome的debug功能
  • jQuery Code Snippets jquery的智能提示
  • vscode-icons 不同的文件以不同的图标显示 跟利于区分
  • Path Intellisense 自动的路径补全
  • Project Manager 项目管理
  • Beautify 实现代码的格式化
  • Auto Rename Tag 标签的重命名



2.3 开发HTML页面

  1. 在本地任意盘符下创建一个vscode的工作空间
  2. 在vscode的工作空间下 创建一个工程目录
  3. 打开VSCode，在文件—选择打开文件夹 ，打开所创建的工程目录
  4. 创建一个HTML文件 扩展名为.html 或者.htm
  5. 在文件中编写HTML页面的基本框架 html:5
  6. 由浏览器进行解析执行 
<!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>



2.4 文档类型

<!--html4的文档类型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--html5的文档类型 -->
<!DOCTYPE html>

必须位于文档的第一行 告诉浏览器当前文档使用的是哪种HTML标准规范。



3 HTML 标签



3.1头部标签

元数据标签：meta标签

通常用于指定网页的描述 关键字 文件的最后的修改时间 作者 及其他的元数据

元数据可以被浏览器使用，搜索引擎发现其他的web服务调用。

content为必须属性，用于定义 http-equiv 或 name 属性的相关元信息

http-equiv为可选属性，把content属性关联到HTTP头部

name为可选属性，把content属性关联到一个名称

schme为可选属性，定义翻译content属性值的格式 

<head>
    <!-- meta标签是页面的元数据 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--设置网页可以自适应布局 width=device-width  适应设备的宽度  initial-scale不缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name='keywords' content="网上购物，网上商城">
    <meta name="description" content="这是一个B2C的全品类的电商网站">
    <meta name="author" content="张三">
    <!-- 设置网页的自动跳转 5秒之后跳转到百度 -->
    <meta http-equiv="refresh" content="5;url=http://www.baidu.com">
    <!-- 页面的标题 -->
    <title>这是第一个HTML页面</title>
</head>



3.2 body内的标签



3.2.1 标签格式
<标签名 属性名 = 属性值，属性名 = 属性值，……>标签封装内容</标签名>

标签名大小写不敏感，推荐统一小写

属性：

  • 基本属性：bgcolor=”red“ 修改元素的基本样式
  • 事件属性：οnclick=“alert(‘你好’)” 点击相应标签后浏览器给出的反应

标签分类

  • 单标签：<标签名/>

  • 双标签：<标签名></标签名>

标签语法

  • 标签不能交叉嵌套，先写后结，后写先结
  • 双标签一定要记得关闭
  • 属性一定要有值，属性值要有双引号
  • 注释不能嵌套


4.2.2 常用标签


4.2.2.1 font 字体标签
<font color="red" face="宋体" size="22"> Hello  HTML </font>


4.2.2.2 特殊符号

空格在源代码中无论写多少个，浏览器都解析成一个

可以使用特殊字符表示空格 

&nbsp； 写几个有几个 

把<br/>换行标签 变成文本 转换为字符显示在页面上，将<>分别换成&lt; 和&gt;
  <h2>这是一个换行标签&lt;br/&gt;</h2>

在这里插入图片描述

在这里插入图片描述



4.2.2.3 标题标签

标题标签 h1 ~ h6

h1最大 h6最小

属性：align：left right center（左对齐，右对齐，居中） 

 <h1 align="left">大学</h1>
 <h2 align="center">大学</h2>
 <h3 align="right">大学</h3>


4.2.2.4 超链接

在网页中所有点击之后可以跳转的内容都是超链接 

 <!-- 
    a 标签是超链接标签
    href 设置链接的地址
    target:
        _self 表示在当前标签中打开链接地址
        _blank 表示在一个新的标签中打开链接地址的页面
  --> 
<a href="http://www.baidu.com" target="_blank">百度</a>


4.2.2.6 列表标签

无序列表，有序列表 

 <!-- 
    ul 表示无序列表
    ol表示有序列表
      li 列表项
        type属性  可以修改列表签的样式 
        	有序列表：A  a  1  i
			无序列表：none  disc   square    circle
  -->
<ol type="i">
    <li>赵四</li>
</ol>

<ul type="circle">
    <li>赵四</li> 
</ul>


4.2.2.5 图像标签
<!-- 
	img 表示图像
		src 文件路径
		width 图片宽度（单位像素）
		heigth 图片高度
		border 边框宽度（单位像素）
		alt 路径错误时显示的字符
-->
<img src="imgs/1.jpg"  width="300px" height="200px" border="10"  alt="这是一张图片">


4.2.2.6 表格标签（重点）
 <!-- 
        标签：table 表示表格
              tr  表示行
              td 表示单元格
              thead 表示表头
              tbody 表示表体
              th 表头的单元格
        表格属性：
             border  表格的边框
             align 表格相对于页面的对齐方式  left  right  center
             width  表格的宽度
             height 表格的高度
             cellspacing 单元格之间的间距
        单元格的属性：colspan 设置跨列   合并列
                    rowspan  设置跨行  行合并
     -->
    <table align="center" border="1" width="300px" height="300px" cellspacing="0">
        <thead>
            <tr >
               <th colspan="4">个人基本信息</th> 
            </tr>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>学校</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr >
                <td>张三</td>
                <td>男</td>
                <td>21</td>
                <td rowspan="2">中北大学</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>18</td>
            </tr>
        </tbody>
        
    </table>


4.2.2.7 iframe 框架标签（了解）内联或内嵌框架

可在HTML页面上，单独出现一个小界面 

  <iframe src="index.html"  width="800px" height="300px" name="abc"></iframe>


4.2.2.8 frameset（了解）

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

和不能同时使用

<!-- 垂直划分  左右分别占比 25%  75 -->
<frameset cols="25%,75%">
    <frame src="index.html">
    <frame src="table.html">
 </frameset>
 <!-- 水平划分 分为上中下  分别占比 25% 50%  25%-->
 <frameset rows="25%,50%,25%">

    <frame src="/example/html/frame_a.html">
    <frame src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html">
  
  </frameset>



5 表单标签

form标签 主要用于收集用户的输入数据，将数据提交到后台并保存

用表格（

）形式实现表单

<body>
    <form action="">
        <h1 align = "center" >用户注册</h1>
        <table align = "center">
            <tr>
                <td>用户名称：</td>
                 <!-- 单行文本输入框 	placeholder 框内提示 -->
                <td><input type="text" value="" placeholder="请输入用户名"/></td>
            </tr>
            <tr>
                <td>用户密码：</td>
                 <!-- 密码框 -->
                <td><input type="password" value="" placeholder="请输入密码"/></td>
            </tr>
            <tr>
                <td>头像：</td>
                 <!-- 文件选择对话框 -->
                <td><input type="file" value="" placeholder="请选择头像文件"/></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
  <!-- 单选按钮是互斥关系，name属性值要一致 这样才能互斥 -->
                    <input type="radio" name="sex" value="man" checked="checked"/>男  
                    <input type="radio" name="sex" value="woman"/>女
                </td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td>
 <!-- 复选框  type=checkbox  可以同时选中多个值  默认选择用 checked=“checked/true” 表示-->
                    <input type="checkbox" value="跑步" checked="true"/>跑步
                    <input type="checkbox" value="爬山"/>爬山
                    <input type="checkbox" value="游泳"/>游泳
                    <input type="checkbox" value="骑车"/>骑车
                </td>
            </tr>
            <tr>
  
                <td>籍贯：</td>
                <td>
 <!--下拉选择框  multiple表示下拉框是否可以多选  默认选择使用selected  option选项 -->
                    <select>
                    <option >--请选择户籍所在地--</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广东">广东</option>
                    <option value="深圳">深圳</option>
                    </select>
                </td>  
            </tr>
            <tr>
                <td>自我评价：</td>
                 <!-- 多行文本输入框	rows代表行数	cols代表列数 -->
                <td><textarea rows="10" cols="50" placeholder="请输入自我评价"></textarea></td>
            </tr>
            <tr>
                <td>
                     <!-- 提交按钮 -->
                    <input type="submit" value="提交"/>
                    <!-- 重置按钮 -->
                    <input type="reset" value="清空"/>
                      <!-- 普通按钮 -->
                    <input type="button" value="按钮"/>
                </td>
            </tr>
        </table>
    </form>
</body>



6 其他标签

div标签

span标签

p 段标签 

<!-- div标签是独占一行  但是 标签本身不占有任何空间 依靠内容来占据空间-->
    <div style="width: 100px; height: 100px; background-color: aqua;">这是一个div标签</div>
    <div>这是一个div标签</div>
    <!-- span标签是在同一行  本身也不占据空间  依靠内容来占有空间 -->
    <span>span标签 </span><span></span> <span>span标签 </span>
    <!-- p段落标签  默认会在段落的上方或下方空出一行 -->
    <p>
     8月6日，郑州市新冠肺炎疫情发布会回应，网传“800人婚宴”夸大其辞，当天参加婚宴者实有402名客人，60名工作人员，请大家不造谣、不信谣、不传谣。那么，这名护士在哪一天确诊？与她的接触者可否定为密接和次密接者......
    </p>
    <p>
     8月6日，郑州市新冠肺炎疫情发布会回应，网传“800人婚宴”夸大其辞，当天参加婚宴者实有402名客人，60名工作人员，请大家不造谣、不信谣、不传谣。那么，这名护士在哪一天确诊？与她的接触者可否定为密接和次密接者......
    </p>



7 文本格式化标签

<body>
    <h1>文本的格式化标签</h1>
    <p>
        <b> b bold  加粗文本</b>
        <br/>
        <strong>strong  加粗文本  语义更加明确</strong>
    </p>
    <p>
        <i> i  斜体文本</i><br/>
        <em>em  斜体文本</em>
    </p>
    <p>
        <big>放大文本</big><br/>
        <small>缩小文本</small>
    </p>
    <p>
        <!-- 上标 -->
        2<sup>2</sup>
        <!-- 小标 -->
        2<sub>2</sub>
    </p>
    <p>
        <ins>给文字加入下划线</ins>
        <del>删除线</del>
    </p>
</body>



8 ”计算机“输出标签

         <!-- 计算机代码 -->
    <code>
        public static void main(String[] args){
            System.out.println();
        }
    </code><br/>
    <!-- 快捷键 -->
    <kbd>shift+ctl</kbd><br/>
    <!-- 代码样本 -->
    <samp>
     --   夏天 是一个难熬的季节
    </samp>
    <!--  预格式文本  原样显示 可以将行和复数的空格表示出来 -->
    <pre>
        <h1>这是一个             标题
            
            
            标签</h1>
    </pre>



9 引文 引用标签

 <!-- abbr 对文字等进行注释描写 -->
<p><abbr title="Hyper  Text  Markup Lanague">HTML </abbr>  是超文本标记语言</abbr></p>
 <!-- address 定义文档或文章的作者/拥有者的联系信息。 文本通常为斜体 -->
    <address>
        name:admin <br/>
        addr: 天津市西青区<br/>
        email:admin@126.com
    </address>
<!-- blockquote 定义块引用。引用内所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进 -->
    <blockquote>
        文档引用： 表现形式就出现缩进
        主要包括结构   表现  和行为三个方面
        <!-- q 短引用  表现就是会添加双引号 -->
        <q>结构标准：用于对网页元素进行整理和分类  主要包括html   和XHTML 等。</q>

        样式标准：表用用于设置网页元素的版式  颜色  大小等外观样式，主要指的就是CSS

        行为标准：指的是网页模型的定义以及交互的方式，主要包括 DOM ，ECMAScript和BOM三部分
    </blockquote>
    <div>
        <!-- cite 用来表述书名  歌曲名等名称 -->
        <cite>《java从入门到放弃》</cite>
        <cite>《HTML从入门到精通》</cite>
    </div>



10 HTML5 的新标签和特性



10.1 文档类型设定

<!DOCTYPE html>



10.2 字符集设定

 <!--HTML5的推荐写法-->
 <meta charset="UTF-8">
 <!--HTML通用写法-->
   <meta http-equiv="charset" content="utf-8"/>



10.3 常用新标签

标签 描述
< article > 定义文章。
< aside > 定义页面内容以外的内容。
< details > 定义用户能够查看或隐藏的额外细节。
< figcaption > 定义 < figure > 元素的标题。
< figure > 规定自包含内容，比如图示、图表、照片、代码清单等。
< footer > 定义文档或节的页脚。
< header > 规定文档或节的页眉。
< main > 规定文档的主内容。
< mark > 定义重要的或强调的文本。
< nav > 定义导航链接。
< section > 定义文档中的节。
< summary > 定义 < details > 元素的可见标题。
< time > 定义日期/时间。



10.4 常用新属性

   <!-- action  表示表单提交的地址 -->
    <form action="">
        <fieldset>
            <legend>注册信息</legend>
            <!--required 必填项  readonly只读  hidden隐藏 -->
            <label for="username">姓名</label><input type="text" name="username" readonly required  hidden id=""><br/>
            <label for="password">密码</label><input type="password" name="password" id=""><br/>
            
        </fieldset>
        <input type="submit" value="tijiao">
    </form>

在这里插入图片描述



11 多媒体标签

embed  嵌入内容 可以插入各种多媒体以及插件
audio 音频
video 视频

    <!-- 
		autoplay = "autoplay" 在媒体文件就绪后自动播放
		controls="controls" 展现控件，如播放按钮
		loop 当媒体文件播放完毕后重新播放
	-->
	<embed src="imgs/movie04.ogg"  width="500px" height="200px" autoplay="autoplay"  > 
        <audio  autoplay="autoplay"  controls="controls"  loop="-1">
            <source src="imgs/music.ogg"/>
        </audio>
        <video  autoplay="autoplay"  controls="controls"  >
            <source src="imgs/movie04.ogg">
        </video>



视频格式

MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。

在这里插入图片描述



音频格式

在这里插入图片描述


版权声明：本文为weixin_47509934原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。