前端-01Html5基本知识

1 基本

1.1 第一个前端程序

  1. 内容

    
        我的网页
    
    
        Hello,我的第一个网页
    

使用浏览器打开

前端-01Html5基本知识_第1张图片

1.2 工具安装

  1. 浏览器

谷歌浏览器

前端-01Html5基本知识_第2张图片

前端-01Html5基本知识_第3张图片

清缓存

ctrl+shift+delete

前端-01Html5基本知识_第4张图片

  1. vscode
  • 生成浏览器文件.html的快捷方式

!+回车

前端-01Html5基本知识_第5张图片

前端-01Html5基本知识_第6张图片

  • 常用快捷键

前端-01Html5基本知识_第7张图片

  • 快速打开浏览器

插件open in browser 安装,就会多出两个选项来

前端-01Html5基本知识_第8张图片

2 Html5

2.1 介绍

  1. 概念

是一种用来描述网页的一种语言,被称为超文本标记语言,本质是标记语言,标记语言是一套标记标签,一般用

  1. DOCTYPE声明

DOCTYPE是document type(文档类型)的缩写。


是H5的声明位于文档的最前面,甚至在之前

作用是网页必备的组成部分,避免浏览器的怪异模式

image.png

  1. html5的基本骨架
  • html标签

  • head标签

    • 必须包含title标签
    • meta标签:一般是限定utf-8编码格式,注意是一个单标签
  • body标签




    
    
    
    Document


    我的第一个网页


2.2 标签之标题

  1. 标题介绍

从h1到h6从大到小,双标签

一级标签

二级标签

三级标签

四级标签

五级标签
六级标签
  • 案例
Document

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

前端-01Html5基本知识_第9张图片

快捷键

h$*6+回车

  • 网页案例

https://www.mi.com/shop

前端-01Html5基本知识_第10张图片

  1. 标题标签位置摆放
align="left center | right"
默认为左的,可以设置属性变成右边

前端-01Html5基本知识_第11张图片

2.3 标签之段落、换行、水平线

  1. 概念

段落§:通过段落去承载文本

换行(br)

水平线(hr)

  1. 段落
  • 运用

    
    
    Document

我是一个段落标签

image.png

  • 网页案例

前端-01Html5基本知识_第12张图片
3. 换行

  • 运用

注意是单标签


    
    
    Document

我是一个段落标签

如果您希望在不产生一个
新段落的情况下进行换行

image.png

  1. 水平线
  • 运用

前端-01Html5基本知识_第13张图片

  • 案例




    
    
    
    Document



    

我是一个段落标签

如果您希望在不产生一个
新段落的情况下进行换行


前端-01Html5基本知识_第14张图片

2.4 标签的图片

  1. 概念

使用标签定义HTML页面中的图像


  1. 运用
  • 用法

前端-01Html5基本知识_第15张图片

  • scr

图片必须和代码在同一个文件夹下




    
    
    
    Document


    


效果

前端-01Html5基本知识_第16张图片

  • alt

    我的qq头像

当图片获取不到的时候,会显示alt的名字,即代替文本

image.png

  • width

    我的qq头像

  • height

    我的qq头像

  • title

鼠标边边会出现文字提示

前端-01Html5基本知识_第17张图片

  1. 关于scr的补充
  • 绝对路径
  • 相对路径

子级关系/

前端-01Html5基本知识_第18张图片

父级关系…/

image.png

同级关系./

2.5 超文本链接

  1. 概念

使用来设置超文本链接,其中href属性来描述链接的地址

链接文本
  1. 运用

    百度

记得写全https://

图片也可以当作跳转的中介


    
        qq头像
    

2.6 文本标签

  1. 基本使用

前端-01Html5基本知识_第19张图片


    月月
    月月
    月月
    月月
    月月
    月月

image.png

  1. 嵌套

	

我喜欢吃em白菜

image.png

2.7 列表标签之有序列表

  1. 有序列表
  • 基本使用

    
  1. 苹果
  2. 橘子
  3. 香蕉
  4. 火龙果

image.png

  • ol属性

前端-01Html5基本知识_第20张图片


    
  1. 苹果
  2. 橘子
  3. 香蕉
  4. 火龙果
  1. 苹果
  2. 橘子
  3. 香蕉
  4. 火龙果

前端-01Html5基本知识_第21张图片

  • 嵌套

也可以嵌套,li中再套一组ol

    
	
  1. 水果
  2. 蔬菜
    1. 白菜
    2. 油菜

image.png

2.8 无序列表

  1. 概念
  • 苹果
  • 橘子
  • 香蕉

前端-01Html5基本知识_第22张图片

  1. ul属性

前端-01Html5基本知识_第23张图片


  • 苹果
  • 橘子
  • 香蕉
  • 苹果
  • 橘子
  • 香蕉
  • 苹果
  • 橘子
  • 香蕉
  • 苹果
  • 橘子
  • 香蕉

前端-01Html5基本知识_第24张图片

  • 嵌套

也可以嵌套的

  1. 实际运用
  • 百度新闻

前端-01Html5基本知识_第25张图片

  • 小米

前端-01Html5基本知识_第26张图片

辅助以css

  1. 快捷键

ul>li*2

2.9 标签之表格

  1. 概念

表格:

行:,有几行就几个tr

单元格(列):,有几列就在tr中写几列,中间可以写文本的

  1. 运用

三行三列的单元格


    

image.png

  1. 快捷键

table td{单元格}

    table>tr*3>td*3{哦哦}

回车成这样
    
哦哦 哦哦 哦哦
哦哦 哦哦 哦哦
哦哦 哦哦 哦哦
  1. 属性
  • 基本属性

image.png

以后用css调整的多

  • 运用
哦哦 哦哦 哦哦
哦哦 哦哦 哦哦
哦哦 哦哦 哦哦
  • 效果

前端-01Html5基本知识_第27张图片

宽高也可以设置,也可以后css调整

  1. 单元格合并
  • 水平合并colspan

    

合并单元格

yes1 yes2 yes3
yes4 yes5 yes6
yes7 yes8 yes9
  • 垂直合并rowspan

    

水平合并单元格3,4以及垂直合并单元格3,6

yes1 yes2 yes3 yes6
yes4 yes5
yes7 yes8 yes9

效果

前端-01Html5基本知识_第28张图片

如果合并四个,先水平合并,后垂直合并

2.10 表单

  1. 引入

image.png

  1. 属性

表单一般包括容器和控件,控件包含输入框和按钮

action服务器地址,method请求类型,name表单名字

  1. 组成

表单标签,表单域(输入框),表单按钮

image.png

  1. 补充表单元素
  • 文本框
    
用户名:

image.png

  • 密码框
    
Password:

image.png

密码是小黑圆点

  • 提交按钮
   

image.png

你可能感兴趣的:(前端,html5,表单)