HTML快速复习

目录

 

!DOCTYPE声明

头部head

标题title标记

元信息meta标记

主体body

 标题

分割线

段落

 加粗倾斜下划线 

文字加删除线

预编译标签

换行

实体字符

 多媒体标签

 超链接

设置锚点

列表标签

表格标签

框架

框架集合

form表单

模拟百度搜索

表单元素

文本框

密码框

单选按钮

多选按钮

文件

隐藏域

普通按钮

特殊按钮

下拉列表

多行文本框

label标签

提交按钮

HTML5新增的一些type类型

HTML5新增的一些属性



        
        
        
                this is my first html... 
        

【1】html标签
定义 HTML 文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。

【2】head标签——>里面放的是页面的配置信息
head标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分:
、<meta>、<link>、<style>、 <script>、 <base>。<br> 应该把 <head> 标签放在文档的开始处,紧跟在 <html> 后面,并处于 <body> 标签之前。<br> 文档的头部经常会包含一些 <meta> 标签,用来告诉浏览器关于文档的附加信息。</p> <p>【3】body标签——>里面放的就是页面上展示出来的内容<br> body 元素是定义文档的主体。body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)body是用在网页中的一种HTML标签,标签是用在网页中的一种HTML标签,表示网页的主体部分,也就是用户可以看到的内容,可以包含文本、图片、音频、视频等各种内容。</p> <p></p> <h2 id="!DOCTYPE%E5%A3%B0%E6%98%8E">!DOCTYPE声明</h2> <p><!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。</p> <p><!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。</p> <p>在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。</p> <p>HTML5 不基于 SGML,所以不需要引用 DTD。现在我们使用的都是HTML5, <!DOCTYPE> 声明在 HTML5 中只有一种</p> <pre><code class="language-html"><!DOCTYPE html></code></pre> <h2 id="%E5%A4%B4%E9%83%A8head">头部head</h2> <p>HTML文档的头部head标记主要包含页面标题标记  元信息标记  样式标记  脚本标记  超链接标记等。头部head标记所包含信息一般不会显示在网页上</p> <h3 id="%E6%A0%87%E9%A2%98title%E6%A0%87%E8%AE%B0">标题title标记</h3> <pre><code class="language-html"><title>这部分文字显示在浏览器标题栏上

元信息meta标记


以下是主要几个属性及取值的说明表

HTML快速复习_第1张图片

这里 一般只需要注意用UTF-8字符集就好啦



主体body

 标题

这是一个标题

这是一个标题

这是一个标题

这是一个标题

这是一个标题
h1到h6,字号逐渐变小

分割线


段落

这是一个段落

 加粗倾斜下划线 

加粗
倾斜
下划线
加粗倾斜下划线

文字加删除线

文字加删除线

预编译标签

保留输入时的换行及空格

空格  换行会保留

换行


实体字符

当我们想让页面把  "

这是一个标题

"  当普通文本显示时,就需要用到实体字符,比如想加入空格就输入 

HTML快速复习_第2张图片

 多媒体标签


图片加载失败







 超链接

 
这是一个超链接01
这是一个超链接02 
这是一个超链接03
这是一个超链接04
这是一个超链接05

设置锚点

在同一页面里移动到某一位置(比如返回顶部)


手机

华为p40

华为p40

华为p40

化妆品

欧莱雅

欧莱雅

欧莱雅

母婴产品

奶粉

奶粉

奶粉

图书

JAVA从入门到入土

JAVA从入门到入土

JAVA从入门到入土

手机 化妆品 母婴产品 书籍

不同页面利用锚点

超链接

列表标签


起床以后需要做的事

  • 睁眼
  • 穿衣服
  • 上厕所
  • 吃早饭
  • 洗漱
  • 出门

学习java的顺序

  1. JAVASE
  2. ORACLE
  3. MYSQL
  4. HTML
  5. CSS
  6. JS

表格标签

应用场景:在页面布局很规整的时候,可能利用的就是表格。
合并原理:

HTML快速复习_第3张图片


学号 姓名 年纪 成绩
1001 丽丽 19 90.5
2006 30
3007 小明 18

运行结果:

HTML快速复习_第4张图片

框架

 内嵌框架是用于在网页中嵌入一个网页并让它在网页中显示.
添加内嵌框架的语法:





URL 指定独立网页的路径.

框架集合

frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。必须使用 cols 或 rows 属性。

里面如果只有一个框架用frame标签
如果多个框架用frameset标签
用cols 或 rows进行行或列的切割




    
    
        
        
        
    
    
        
        
    

运行结果

HTML快速复习_第5张图片

form表单

 -name:表单提交时的名称
-action:提交到的地址
-method:提交方式,有get和post两种,默认为get



用户名:
密码:

模拟百度搜索



        
                
                百度一下,你就知道
                
        
        
                

表单元素

文本框




密码框


单选按钮


性别:

多选按钮


你喜欢的语言:
java
python
php
c#

文件


隐藏域


普通按钮


特殊按钮






下拉列表


你喜欢的城市:

多行文本框


自我介绍:

label标签


提交按钮


HTML5新增的一些type类型

110

HTML5新增的一些属性



你可能感兴趣的:(HTML快速复习)