高效学习html

最新推荐文章于 2024-04-19 11:41:28 发布

梦魇中

最新推荐文章于 2024-04-19 11:41:28 发布

阅读量310

点赞数

分类专栏： java学习文章标签： html

本文链接：https://blog.csdn.net/ASDASDADF/article/details/108237620

版权

java学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

HTML的学习

什么是HTML

HTML（超文本标记语言）是用于在Internet上显示Web页面的主要标记语言。网页由HTML组成，用于通过Web浏览器显示文本，图像或其他资源。HTML文件的文件扩展名为.htm或.html。

网页的版本

HTML4
XHTML2.0
HTML5
...

文档声明（doctype）

文档声明用来告诉浏览器当前网页的版本
		html5的文档声明
		<!doctype html>
		<!Doctype HTML>

浏览器规范

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
            比如：
                标签写在了根元素的外部
                p元素中嵌套了块元素
                根元素中出现了除head和body以外的子元素

第一个HTML：基本结构

<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>

<!-- html的根标签（元素），网页中的所有内容都要写根元素的里边 -->
<html>

	<!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
	<head>

		<!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
		<meta charset="utf-8">
		
		<!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
		<title>网页的标题</title>

	</head>

	<!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
	<body>

		<!-- h1网页的一级标题 -->
		<h1>网页的大标题</h1>

	</body>

</html>

HTML的注释

语法：

**注意：**注释不能嵌套

<!-- 
		HTML的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，
			但是可以在源码中查看注释，注释用来对代码进行解释说明的
			开发中一定要养成良好的编写注释的习惯，注释要求简单明了
		
		注释还可以将一些不希望显示的内容隐藏
		
		注释不能嵌套
		
		标签一般成对出现，但是也存在一些自结束标签
		
		
		<img>
		<img />
		<input>
		<input />
		-->

属性

<!-- 
		属性，在标签中（开始标签或自结束标签）还可以设置属性
			属性是一个名值对（x=y）
			属性用来设置标签中的内容如何显示
			
			属性和标签名或其他属性应该使用空格隔开
			
			属性不能瞎写，应该根据文档中的规定来编写，
				有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来
			
			
-->
		<!-- 把字体设置为红色，大小为3 -->
		<h1>这是我的<font color="red" size='3'>第三个</font>网页！</h1>

实体

<!--
     在HTML中有些时候，我们不能直接书写一些特殊符号
            比如：多个连续的空格，比如字母两侧的大于和小于号

        如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）
        实体的语法：
            &实体的名字;
                &nbsp; 空格
                &gt; 大于号
                &lt; 小于号
                &copy; 版权符号
 -->

meta标签

作用：

1.为网页设置字符集

2.为网页设置关键字

3.为网页设置描述

4.重定向到另一个页面

 <meta charset="UTF-8">
    <!-- 
        meta主要用于设置网页中的一些元数据，元数据不是给用户看
            charset 指定网页的字符集
            name 指定的数据的名称
            content 指定的数据的内容

    keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
    <meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">
                    
    description 用于指定网站的描述
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
    网站的描述会显示在搜索引擎的搜索的结果中
     -->
     <meta name="keywords" content="HTML5,前端,CSS3">
     <meta name="description" content="这是一个非常不错的网站">


	
     <!--
	 将页面重定向到另一个网站
    <meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> 
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> 
	-->

 <!-- title标签的内容会作为搜索结果的超链接上的文字显示 -->   
<title>Document</title>

标签的语意

概述：在网页中HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式。

块元素

在页面中独占一行的元素称为块元素（block element），在网页中一般通过块元素来对页面进行布局

行内元素

在页面中不会独占一行的元素称为行内元素（inline element），行内元素主要用来包裹文字。

**注意：**一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素，块元素中基本上什么都能放，p元素中不能放任何的块元素

标题标签

h1 ~ h6 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
一般情况下标题标签只会使用到h1_h3，h4h6很少用。

注意：标题标签都是块元素

	 <h1>一级标题</h1>
     <h2>二级标题</h2>
     <h3>三级标题</h3>
     <h4>四级标题</h4>
     <h5>五级标题</h5>
     <h6>六级标题</h6>

hgroup标签

**概述：**hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup

 <hgroup>
            <h1>回乡偶书二首</h1>
            <h2>其一</h2>
 </hgroup>

p标签

p标签表示页面中的一个段落，p也是一个块元素。

 <p>在p标签中的内容就表示一个段落</p>
 <p>在p标签中的内容就表示一个段落</p>

em标签

em标签用于表示语音语调的一个加重，会有一些倾斜效果。

 <p>今天天气<em>真</em>不错！</p>

strong标签

strong表示强调，重要内容！会有加粗效果

<p>你今天必须要<strong>完成作业</strong>！</p>

i标签

i标签会使文字变成斜体

b标签

b标签会使文字变成粗体

这两个标签和em和strong类似，但是这两个标签没有语义，

blockquote标签

blockquote 表示一个长引用，换行并且缩进。

 鲁迅说：
      <!-- blockquote 表示一个长引用 -->
      <blockquote>
          这句话我是从来没有说过的！
      </blockquote>

效果：

鲁迅说：

这句话我是从来没有说过的！

q标签

q表示一个短引用，会在一行显示，不会换行

子曰<q>学而时习之，乐呵乐呵！</q>

br标签

br标签表示页面中的换行

 <br>
 <br>

header标签

表示网页的头部

main标签

表示网页的主体部分(一个页面中只会有一个main)

footer标签

表示网页的底部

nav标签

表示网页中的导航

aside标签

和主体相关的其他内容（侧边栏）

article标签

表示一个独立的文章

section标签

表示一个独立的区块，上边的标签都不能表示时使用section

div标签

没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素

span

行内元素，没有任何的语义，一般用于在网页中选中文字

small标签

small标签表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等。浏览器在显示small标签时会显示一个比父
元素小的字号。

<p><small>cccc</small></p>

cite标签

使用cite标签可以指明对某内容的引用或参考。例如，戏剧、文章或图书的标题，歌曲、电影、照片或雕塑的名称等。

<p>
<cite>《七龙珠》</cite>讲的是召唤神龙的故事。
</p>

sub和sup标签

sup和sub用于定义上标和下标

<p>
    10<sub>3</sub>
</p>

<p>
    10<sup>3</sup>
</p>

ins和del标签

ins表示插入的内容，显示时通常会加上下
划线。

del表示删除的内容，显示时通常会加上删
除线

code和pro标签

如果你的内容包含代码示例或文件名，就可以使用code元素

pre元素表示的是预格式化文本，可以使用pre包住code来表示一段代码。

<pre>
<code>
function fun(){
alert("hello");
}
</code>
</pre>

列表

列表（list），在html中也可以创建列表，html列表一共有三种：

1、有序列表，使用ol标签来创建无序列表，使用li表示列表项

 <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>

2、无序列表，使用ul标签来创建无序列表使用li表示列表项

 <ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>

3、定义列表，使用dl标签来创建一个定义列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明

<dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
        <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
        <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>

**注意：**列表之间可以互相嵌套

<ul>
        <li>
            aa
            <ul>
                <li>aa-1</li>
                <li>aa-2
                    <ul>
                        <li>aa-1</li>
                        <li>aa-2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置

超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

使用 a 标签来定义超链接

<a href="https://www.baidu.com">超链接</a>
<a href="07.列表.html">超链接2</a>

a标签的属性：

href 指定跳转的目标路径
1. 在开发中可以将#作为超链接的路径的展位符使用，使用后点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置。
```
<a href="#">这是一个新的超链接</a>
```
2. 可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值
```
<a href="#bottom">去底部</a>
<a id="bottom" href="#">回到顶部</a>
```
3. 可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生
```
 <a href="javascript:;">这是一个新的超链接</a>
```
target属性，用来指定超链接打开的位置

可选值：
1. _self,默认值在当前页面中打开超链接
2. _blank 在一个新的要么中打开超链接

图片标签

图片标签用于向当前页面中引入一个外部图片

语法：

<img src="./img/1.gif" alt="松鼠">

属性：

src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
width 图片的宽度 (单位是像素)
height 图片的高度 (宽度和高度中如果只修改了一个，则另一个会等比例缩放)

注意：一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大，但是在移动端，经常需要对图片进行缩放（大图缩小）

图片的格式

jpeg(jpg)，支持的颜色比较丰富，不支持透明效果，不支持动图，一般用来显示照片
gif，支持的颜色比较少，支持简单透明，支持动图，颜色单一的图片，动图
png，支持的颜色丰富，支持复杂透明，不支持动图，颜色丰富，复杂透明图片（专为网页而生）
webp，这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，而且文件还特别的小，缺点：兼容性不好
base64，将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片，一般都是一些需要和网页一起加载的图片才会使用base64。
使用原则：效果一样，用小的，效果不一样，用效果好的

<img src="./img/1.gif" alt="松鼠">
<img width="200"  src="https://d2ggl082rr1mkp.cloudfront.net/category/IronMan_preview_1521810286_220_310.jpeg" alt="钢铁侠">

内联框架Iframe

内联框架，用于向当前页面中引入一个其他页面

语法：

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

属性：

src 指定要引入的网页的路径

frameborder 指定内联框架的边框

frameSet

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

属性	值	描述
cols	pixels，%，*	定义框架集中列的数目和尺寸
rows	pixels，%，*	定义框架集中行的数目和尺寸

frameSet里面可以放iframe和frame。

frame

标签定义 frameset 中的一个特定的窗口（框架）。frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等。

**重要事项：**您不能与标签一起使用标签。不过，如果您需要为不支持框架的浏览器添加一个标签，请务必将此标签放置在标签中！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZYyWufN5-1598416383781)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200825104017829.png)]

audio 标签

audio 标签用来向页面中引入一个外部的音频文件的，音视频文件引入时，默认情况下不允许用户自己控制播放停止。

语法：, 基本上是一样

 <audio controls>
        <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
        <source src="./source/audio.mp3">
        <source src="./source/audio.ogg">
        <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
    </audio>

<!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 -->
<video controls>
        <source src="./source/flower.webm">
        <source src="./source/flower.mp4">
        <embed src="./source/flower.mp4" type="video/mp4">
</video>

属性：

controls 是否允许用户控制播放

autoplay 音频文件是否自动播放(如果设置了autoplay 则音乐在打开页面时会自动播放，但是目前来讲大部分浏览器都不会自动对音乐进行播放 )

loop 音乐是否循环播放

table标签

一个简单的 HTML 表格，包含多行多列，简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr:行

td:列

th:首行

table:表格，最外面包括着的标签。

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Event 对象

[学习链接][https://www.w3school.com.cn/jsref/dom_obj_event.asp]

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

事件句柄　(Event Handlers)

当HTML触发了浏览器的行为，会执行对应的事件句柄。

常用事件：

onblur：元素失去焦点。

onclick：当用户点击某个对象时调用的事件句柄。

onfocus：元素获得焦点

onkeydown：某个键盘按键被按下。

onkeypress：某个键盘按键被按下并松开

onkeyup：某个键盘按键被松开。

onmousedown：鼠标按钮被按下

onmousemove：鼠标被移动。

onmouseout：鼠标从某元素移开。

onmouseover：鼠标移到某元素之上。

onmouseup：鼠标按键被松开。

onsubmit：确认按钮被点击。

鼠标 / 键盘属性

返回当事件被触发时，当前元素的属性

常用属性：

altKey：返回当事件被触发时，“ALT” 是否被按下。

button：返回当事件被触发时，哪个鼠标按钮被点击。

clientX：返回当事件被触发时，鼠标指针的水平坐标。

clientY：返回当事件被触发时，鼠标指针的垂直坐标。

screenX：返回当某个事件被触发时，鼠标指针的水平坐标。

screenY：返回当某个事件被触发时，鼠标指针的垂直坐标。

shiftKey：返回当事件被触发时，“SHIFT” 键是否被按下。

)：确认按钮被点击。

鼠标 / 键盘属性

返回当事件被触发时，当前元素的属性

常用属性：

altKey：返回当事件被触发时，“ALT” 是否被按下。

button：返回当事件被触发时，哪个鼠标按钮被点击。

clientX：返回当事件被触发时，鼠标指针的水平坐标。

clientY：返回当事件被触发时，鼠标指针的垂直坐标。

screenX：返回当某个事件被触发时，鼠标指针的水平坐标。

screenY：返回当某个事件被触发时，鼠标指针的垂直坐标。

shiftKey：返回当事件被触发时，“SHIFT” 键是否被按下。

梦魇中

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
高效学习html

HTML的学习什么是HTMLHTML（超文本标记语言）是用于在Internet上显示Web页面的主要标记语言。网页由HTML组成，用于通过Web浏览器显示文本，图像或其他资源。HTML文件的文件扩展名为.htm或.html。网页的版本HTML4XHTML2.0HTML5...文档声明（doctype）文档声明用来告诉浏览器当前网页的版本 html5的文档声明 <!doctype html> <!Doctype HTML>浏览器规范浏览器在解析网页
复制链接

扫一扫