HTML基础

Day01.网页基础

学习目标：

1. 了解网页和常见的浏览器
2. 了解W3C组织及WEB标准
3. 安装Vs Code、Chrome
4. 掌握HTML基本结构
5. 掌握常见标签的使用
6. 掌握Git版本控制工具的基本使用

一、安装Vs Code

1.所需插件：

• ESLint

• Prettier

• Vetur

• YAML

• open in browser

• One Dark Pro

二、HTML基础

1.网页、网页文件和网站

2.网页传输

• 使用HTTP协议传输

  ​ HTTP协议（短连接）是基于TCP/IP协议

  ​ TCP：数据传输协议，稳定的长连接

  ​ UDP：数据报协议，能够传输大量的数据

• HTTP协议会话包括4个步骤：

  ​ 1.建立连接：客户端的浏览器与服务器发出建立连接请求，服务器给出响应就可以建立连接

  ​ 2.发送请求：客户端按照协议的要求通过连接向服务器发送自己的请求

  ​ 3.给出应答：服务端按照客户端的要求给出应答，把结果（HTML文件）返回给客户端

  4.关闭连接：客户端接收应答后关闭连接

• 常见标签

  • meta标签

      <meta name="keywords"  content=""/>  搜索关键字
      <meta name="description" content=""/>   网站描述
      <meta charset="UTF-8"/>  编码格式
      <meta http-equiv="Refresh" content="5;url=""/>  过几秒自动刷新
    

  • 标题

    <h1>标题</h1>
    

    h标签：代码语义化

    块级元素和内联元素

    • 块级元素：独占一行，可以改变宽高
    • 内联元素：不是独占一行，不可以改变宽高

  • 段落、换行

    • 段落：

      …

    • 换行(单标签)：
      

  • 水平分割线

    • ---

  • 字体样式

    • 加粗：…
    • 斜体：…

  • 图像

    • 常见的图像格式

      JPG GIF PNG BMP

      

      1、图片的宽和高不要进行修改

      2、后退一步：…/

  • 超链接

    ​ 链接的文本或图像

    • 页面间链接

    • 锚链接

      • 相同页面之间的链接

      • 不同页面之间的链接

    • 功能性链接

  • 特殊符号

    • 空格： 
    • 大于号：>
    • 小于号：<
    • 引号：""
    • 版权符号：©

  • 注释

• Git 版本控制工具

• 兼容错误性高

三、WEB前端开发

1.列表

1.有序列表

reversed（属性名跟值相同）HTML5的特性

2.无序列表

3.定义列表

列表中的项目

描述列表中的项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uwpDHHYw-1584779840915)(网页基础_img/image-20200318102807947.png)]

2.表格

表格标头11	第一个单元格的内容 一行一列	表格标头12	第二个单元格的内容 一行二列
表格标头21	第一个单元格的内容 二行一列	表格标头22	第二个单元格的内容 二行二列

1. table标签属性：

   • border=“1px”：设置边框宽度

   • cellpadding=“0”:规定单元边沿与其内容之间的空白

   • cellspacing=“0”:规定单元格之间的空白

   • width：规定表格的宽度

   • align=“left/center/right”：居中

   • bgcolor：背景色

   • td：colspan=""：表格的跨列

   • td：rowspan=""：表格的跨行

     流量调查表

     总页面流量	共计来访	会员	游客
     9756488	97656	236546	9756488
     9756488	97656	236546	9756488
     9756488	97656	236546	9756488
     平均每人浏览	1.58

3.多媒体

1.视频

你的浏览器不支持video元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FDrf8hSd-1584779840925)(网页基础_img/image-20200318143222862.png)]

2.音频

4.H5新增标签

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dpZtgA63-1584779840932)(网页基础_img/image-20200318144256664.png)]

1. 内联框架

   框架

​ 规定无法调整框架的大小

​

​

5.表单

 <form action="" method="get">
     <!--
      action:规定当提交表单时向何处发送数据
      autocomplete：规定表单是否启用自动完成的功能
      get:明文提交  不安全  传输速度快 传输量小
      name：表单的名称
      target：规定在何处打开action URL
      值：_blan;_self;_parent;_top;;framename
      novalidata:提交表单时不进行验证
      -->
     <input type="text" name=""/>
     <!--
     autofocus:获得焦点
     checked：默认值
     type=button;checkbox;file;.....
     radio:单选按钮框
     checkbox:多选框
     -->
     <input type="radio" name="sex" value="man"  checked/>
     <input type="image" src=""/>
 </form>

1.列表框

2.多行文本域

文本内容

3.邮箱

邮箱：

4.网址

网址：

5.数字

请输入数字：

6.滑块

滑块：

7.搜索框

搜索框：

8.表单的高级应用

• 表单验证

  placeholder

  pattern：正则表达式

​ required