前端基础 Day01

HTML5（1）

 

1. 什么是html

Hyper Text Makup Language （超文本标记语言）

f12 显示网页html和css代码

如今就是 html5+css3

W3C -->World Wide Web Consortium （万维网联盟），成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

W3C标准包括：

  1. 结构化标准语言（HTML、XML）

  2. 表现标准语言（CSS）

  3. 行为标准（DOM、ECMAScript）

 

在idea里边新建html：

删掉src（emm，因为没啥用，多余），new一个Dictory，然后再里边new一个HTML file，

可以用中文命名，自动生成代码

设置网页打开：

setting--> 搜web-->Tools 更改exe的路径

 

html基本结构：

1  <head>
2      <meta charset="UTF-8">
3      <title>Title</title>
4  </head>
5  <body>
6  ​
7  </body>

head 里是网页头部，body里是主体部分

成对的标签分别叫做开放标签和闭合标签，单独呈现的标签，如<hr/>；意味用/来关闭空元素

 

2. 网页的基本信息

注释<!-- --> 快捷键 ctrl + /

DOCTYPE：告诉预览器，我们要使用什么规范

mate 描述性标签，用来描述网站的一些信息 ，一般用来做SEO

 1  <!-- DOCTYPE:告诉预览器，我们要使用什么规范 -->
 2  <!DOCTYPE html>
 3  <html lang="en">
 4  <!-- head 标签代表网页头部 -->
 5  <head>
 6      <!--mate 描述性标签，用来描述网站的一些信息 -->
 7      <!--mate 一般用来做SEO -->
 8      <meta charset="UTF-8">
 9      <meta name="keywords" content="html学习">
10      <meta name="description" content="好好学习，天天向上">
11      <!-- title 网页标题 -->
12      <title>我的第一个网页</title>
13  </head>
14  <!-- body 标签代表网页头部 -->
15  <body>
16  Hello，World！
17  </body>
18  </html>

在网页右键查看源代码，浏览器本身就是智能的idea

 

3. 网页基本标签

自动生成 tab键

标题标签 <h1></h1>

段落标签 <p></p>

换行标签 <br/> 比上面的更加密集

水平线标签 <hr/>

字体样式标签 粗体 <strong></strong> 斜体<em></em>

特殊符号 &开头 ;   结尾 ，查百度

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>基本标签学习</title>
 6  </head>
 7  <body>
 8  ​
 9  <!--标题标签-->
10  <h1>一级标签</h1>
11  <h2>二级标签</h2>
12  <h3>三级标签</h3>
13  ​
14  <!--段落标签-->
15  <p>Frère Jacques,</p>
16  <p>Frère Jacques,</p>
17  <p>Dormez-vous?</p>
18  <p>Dormez-vous?</p>
19  <p>Sonnez les matines!</p>
20  <p>Sonnez les matines!</p>
21  <p>Ding, dang, dong.</p>
22  <p>Ding, dang, dong.</p>
23  ​
24  <!--水平线标签-->
25  <hr/>
26  ​
27  <!--换行标签-->
28  Are you sleeping? Are you sleeping?<br/>
29  ​
30  Brother John, Brother John?<br/>
31  ​
32  Morning bells are ringing. Morning bells are ringing.<br/>
33  ​
34  Ding, dang, dong.Ding, dang, dong.<br/>
35  ​
36  <!--粗体,斜体-->
37  <h1>字体样式标签</h1>
38  粗体:<strong>i love u </strong>
39  斜体:<em>i love u </em>
40  ​
41  <br/>
42  <!--特殊符号-->
43  空    格:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;111
44  <br/>
45  大于号:&gt;
46  <br/>
47  小于号:&lt;
48  <br/>
49  版权符号:&copy;
50  <br/>
51  ​
52  </body>
53  </html>

 

4. 图像标签

<img scr="path" alt="text" title="text" width="x" height="y"/>

图像地址 图像替代文字 鼠标悬停提示文字 图像宽度 图像高度

img + tab  生成

养成良好的习惯：新建一个resources 目录，把图片放在里边

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>图像标签学习</title>
 6  </head>
 7  <body>
 8  <!--img学习
 9  src：图片地址
10      相对地址（推荐使用），绝对地址
11      ../   --上一级目录(相对路径)
12      D:/  （绝对路径）
13  alt:必填！
14  ​
15  -->
16  <img src="../resources/image/violet1.png" alt="薇尔莉特" title="老婆" width="300" height="300">
17  </body>
18  </html>

 

5. 链接标签

<a href="path" target"目标窗口的位置">链接文本或图像</a>

链接路径 链接在哪个窗口打开 (常用值 _ self 、_ blank) blank新的 self当前的

a + tab生成

ctrl + d 复制到下一行！！ 快捷键

 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>链接标签学习</title>
 6  </head>
 7  <body>
 8  ​
 9  <!--a标签
10  href：必填，表示要跳转到哪个页面
11  -->
12  <a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
13  <a href="https://www.baidu.com/">点击我跳转到百度</a>
14  ​
15  //嵌套
16  <br/>
17  <a href="1.我的第一个网页.html">
18      <img src="../resources/image/violet1.png" alt="薇尔莉特" title="老婆" width="300" height="300">
19  </a>
20  ​
21  </body>
22  </html>

 

锚标签：

锚链接

  1. 需要一个锚标记

  2. 跳转到标记

 1  <a name="top">顶部</a>
 2  <a href="#top">回到顶部</a>
 3  ​
 4  <!--页面之间跳转-->
 5  <a href="4.链接标签.html#top"></a>
 6  ​
 7  <!--功能性链接
 8  邮件链接：mailto
 9  qq链接：去qq推广的官网登陆后点推广工具自动生成，图片加载不出来，要在图片链接的两个冒号里写qq号
10  -->
11  <a href="mailto:825728422@qq.com">点击联系我</a>
12  <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好，加我领取小电影" title="你好，加我领取小电影"/></a>

 

6. 块元素和行内元素

块元素：无论内容多少，该元素独占一行，（p、h1-h6）

行内元素：可以排在一行，（a、strong、em）

 

7. 列表标签

列表是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来

分类：无序ol、有序ul、自定义dl

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>列表学习</title>
 6  </head>
 7  <body>
 8  ​
 9  <!--有序列表-->
10  <ol>
11      <li>i</li>
12      <li>l</li>
13      <li>o</li>
14      <li>v</li>
15      <li>e</li>
16      <li>u</li>
17  </ol>
18  <!--分割线-->
19  <hr/>
20  ​
21  <!--无序列表-->
22  <ul>
23      <li>i</li>
24      <li>l</li>
25      <li>o</li>
26      <li>v</li>
27      <li>e</li>
28      <li>u</li>
29  </ul>
30  <hr/>
31  <!--自定义列表
32  dl：标签
33  dt：列表名称
34  dd：列表选项
35  -->
36  <dl>
37      <dt>学科</dt>
38      <dd>java</dd>
39      <dd>python</dd>
40      <dd>Linux</dd>
41  ​
42      <dt>位置</dt>
43      <dd>保定</dd>
44      <dd>北京</dd>
45  </dl>
46  </body>
47  </html>

 

8. 表格标签

table      行tr       列td

clospan跨列       rowspan跨行

 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>表格学习</title>
 6  </head>
 7  <body>
 8  ​
 9  <!--表格
10  行  tr
11  列  td
12  table-->
13  <table border="1px">
14      <tr>
15          <td>1-1</td>
16          <td>1-2</td>
17          <td>1-3</td>
18          <td>1-4</td>
19      </tr>
20      <tr>
21          <td>2-1</td>
22          <td>2-2</td>
23          <td>2-3</td>
24          <!--rowspan跨行-->
25          <td rowspan="2">2-4</td>
26      </tr>
27  ​
28      <tr>
29          <!--clospan跨列-->
30          <td colspan="3">3-1</td>
31      </tr>
32  </table>
33      
34  </body>
35  </html>

 

9. 视频和音频

controls 播放控制 autoplay 自动播放

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>媒体元素学习</title>
 6  </head>
 7  <body>
 8  ​
 9  <!--音频和视频-->
10  <video src="../resources/video/哈利波特.mp4" controls autoplay height="300" width="150"></video>
11  ​
12  <audio src="../resources/audio/动漫原声-again.mp3" controls></audio>
13  ​
14  </body>
15  </html>

 

posted @ 2021-03-12 19:15  825728422  阅读(75)  评论(0)    收藏  举报