20---HTML5语法++

最新推荐文章于 2023-11-06 10:57:18 发布

Chosen_ONE026

最新推荐文章于 2023-11-06 10:57:18 发布

阅读量765

点赞数 1

本文链接：https://blog.csdn.net/weixin_45391505/article/details/99123684

版权

本文档详细介绍了HTML5的基础知识，包括HTML的概念、特点、基本结构和常见标签的使用，如文本、列表、图像、链接、表格和表单等。通过实例演示，帮助读者掌握在IntelliJ IDEA中创建和运行HTML文档的方法，以及如何制作简单的网页。学习内容涵盖了从HTML5的介绍到实际应用，如黑马旅游网页面的布局，旨在提供全面的HTML5入门指导。

摘要由CSDN通过智能技术生成

typora-root-url: img
typora-copy-images-to: img

《HTML5-笔记》

回顾

接口映射文件实现一对一步骤

实体类包含另一个实体

[外链图片转存失败(img-zhfAqr00-1565448598963)(/1565313108172.png)]
配置接口映射文件:association

[外链图片转存失败(img-MIKU8vj8-1565448598964)(/1565313188163.png)]

接口映射文件实现一对多步骤

实体类包含另一个实体类的集合

[外链图片转存失败(img-dThbzegI-1565448598965)(/1565313270447.png)]
配置接口映射文件:collection

[外链图片转存失败(img-WLdSkGo2-1565448598967)(/1565313359193.png)]

学习目标

能够使用idea创建html文档
能够使用h1~h6、hr、p、br 等与文本有关的标签
能够使用有序列列表ol-li和无序列列表ul-li显示列表内容
能够使用块标签div与内联标签span
能够使用图片img标签把图片显示在页面中
能够使用超链接a标签跳转到一个新页⾯
能够使用table、tr、td标签定义表格
能够制作黑⻢马旅游网的⾸页
能够使用表单form标签创建表单容器
能够使用表单中常⽤用的input标签创建输⼊项
能够使用表单select标签定义下拉选择输⼊项
能够使用表单textarea标签定义文本域

阶段的学习内容

前端的内容(4天，开始)
1. HTML网页
2. CSS样式，美化网页
3. JavaScript
4. 框架Bootstrap
后续再学习JavaWeb

学习内容

HTML的概述

目标

学习HTML的概念和作用

概念

HTML：Hyper Text Markup Language 超文本标记语言。

HTML的作用：就是开发网页的。

[外链图片转存失败(img-NT6nBlti-1565448598968)(/1551669344927.png)]

超文本：(超人) 不同于普通文本，超文本不但可以阅读，还可以有交互的功能，还可以设置字体，颜色，添加图片等。
标记语言：由一些固定标记组成

[外链图片转存失败(img-NgBmklig-1565448598968)(/1551669381083.png)]

标签格式：以<开头，以>结束。
纠错：浏览器有自动纠错的功能，如果网页中有错误，浏览器不会报错。

运行方式

[外链图片转存失败(img-jTobQ7Dy-1565448598970)(/1551669429404.png)]

保存在：服务器上
运行在：浏览器端，从服务器上把网页下载。然后再解析。

小结

什么是HTML？
Hyper Text Markup Language 超文本标记语言。用来做网页的
HTML保存在服务器，运行在浏览器

HTML5的介绍

目标

学习HTML5的概念和特点

[外链图片转存失败(img-EBlUMPoi-1565448598971)(/1551669453294.png)]

HTML5的概念

HTML的第5个版本，简称H5。

HTML5的特点

HTML5的特点:在桌面和移动平台上有一致的用户体验。

2014年10月29日，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布，这是一次重大的革新。HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。

目前支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等。不同的浏览器之间是有差异的，同一个网页在不同的浏览器上运行结果可能不同。

[外链图片转存失败(img-VwBNPu7W-1565448598971)(/1551669532678.png)]

HTML5的作品

[外链图片转存失败(img-F93TvAF7-1565448598972)(/1554254224426.png)]

小结

什么是HTML5，它有什么特点？

HTML的第5个版本，特点让移动端和PC端有相同的用户体验。

网页的基本结构、使用idea创建网页

目标

学习idea创建HTML

常见的HTML编辑器

HBuilder

[外链图片转存失败(img-u2JxtLE6-1565448598973)(/1551669763877.png)]
Adobe Dreamweaver CS

[外链图片转存失败(img-mbcJdRqR-1565448598974)(/1551669807940.png)]
SublimeText

[外链图片转存失败(img-BoE0MRvA-1565448598975)(/1551669828420.png)]
NotePad

[外链图片转存失败(img-YR504tMp-1565448598976)(/1551669847102.png)]
IDEA

使用IntelliJ IDEA创建html

一个网页项目建议按如下目录创建结构

[外链图片转存失败(img-4IT6ccDf-1565448598977)(/1551670240611.png)]

创建静态Web模块

[外链图片转存失败(img-iPNV7Av0-1565448598978)(/1554255161498.png)]
指定工程名和保存位置

[外链图片转存失败(img-tGobUCMQ-1565448598979)(/1554255285459.png)]
创建HTML文件，选择html5的版本

[外链图片转存失败(img-4TdiwMP2-1565448598980)(/1551670139700.png)]

创建HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
<h1>世界,你好!</h1>
</body>
</html>

HTML的基本结构

标签名	作用
html	根元素(根标签)
head	网页头部
body	网页主体，网页的内容写在body中
注释	格式：<!-- 内容 --> 嵌套：不能嵌套

点右上角一排浏览器按钮运行，idea会使用内置的服务器在指定的浏览器上运行。

[外链图片转存失败(img-eEHNjK8k-1565448598981)(/1551670171151.png)]
在浏览器上运行的结果

[外链图片转存失败(img-R1TET3jP-1565448598982)(/1551670186424.png)]
访问地址：运行在自己的服务器上。

[外链图片转存失败(img-RFuJXeme-1565448598982)(/1551670197659.png)]
通常不需要修改浏览器文件的地址，如果要修改可以在这里操作

[外链图片转存失败(img-gxLI4Jhy-1565448598983)(/1551670268837.png)]

小结

使用idea创建HTML步骤

新建static web模块
在模块上右键-> New -> HTML FILE

文本标签的学习

目标

学习标签的分类
学习文本标签的使用

HTML标签的分类

有否有主体	格式
有主体标签	<标签名>主体内容</标签名>
没有主体标签	<标签名></标签名> 简化为：<标签名/>

是否换行	特点
块标签	自带换行效果
内联标签	不带换行效果

文本标签介绍

[外链图片转存失败(img-u7wFn7Pk-1565448598984)(/1551670393595.png)]

[外链图片转存失败(img-DEm4XgSD-1565448598985)(/1551670419113.png)]

补：

文本内容文本居中标签

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!--指定字符集，注释：ctrl + / -->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--有主体标签, 块标签。 -->
<!--作用：用于文章的标题,有6级标题，级数越小，字越大 -->
<h1>我们是害虫</h1>
<!--align属性的作用：指定对齐方式，常用：center,left,right-->
<h2 align="center">我们是害虫</h2>
<h3 align="right">我们是害虫</h3>
<h4>我们是害虫</h4>
<h5>我们是害虫</h5>
<h6>我们是害虫</h6>
<!--没有主体: 水平线，块标签 -->
<hr/>
<!--width指定宽度, color: 颜色, size: 粗细。单位是像素 -->
<hr width="400" color="red" size="5"/>
<!--没有换行的标签，内联标签。-->

<!--font在H5版本中已经不使用，设置：颜色，大小，字体 -->
<font color="green" size="30" face="楷体">这是普通文本</font><br/>
<!--b和strong标签都是加粗:  bold -->
<font color="green" size="30" face="楷体"><b>这是普通文本</b></font><br/>
<!--i斜体  italic -->
<font color="green" size="30" face="楷体"><b><i>这是普通文本</i></b></font>

<!--p分段，每个分段之间有一定的间隔，首行没有缩进-->
<p>
超文本： 不同于普通文本，比普通文本功能更强文本。设置文本大小，颜色，样式。可以有音乐，视频。还可以点击，跳转到其它页面去。
</p>
<p>
标记语言： 整个网页由各种标记组成。
</p>
<p>
不同于编程语言，它通过标记符号来标记要显示网页中的各个部分。
</p>
</body>
</html>

小结

说说下面文本标签的作用	功能
h1~h6	标题标签，h1最大
font	字体标签，设置文字的颜色，大小，字体
br	换行
p	段落
hr	水平分割线
b	加粗
i	倾斜

案例：制作黑马公司介绍

目标

使用已经学习的文本标签，制作如下的公司介绍的页面

效果

[外链图片转存失败(img-DZfuH3ob-1565448598986)(/1551670516854.png)]

步骤

“公司介绍”使用标题标签完成。例如：<h2>
两条橙色的线使用水平线完成
这个文档被划分成4个段落，使用段落标签<p>完成
“中关村黑马程序员训练营” 需要使用font标签完成
“传智播客” 需要斜体<i> 和粗体<b> 组合完成
第2行与第3行是一个普通的换行，需要使用<br/>完成
最下面的页脚使用2号字体大小，灰色，居中

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中关村黑马程序员训练营</title>
</head>
<body>
<h2>黑马公司介绍</h2>
<hr color="orange" size="4"/>
<p>
    <!--使用实体字符：&nbsp;表示空格，半角空格-->
    <!--ctrl+alt+t 用标签包裹 -->
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font color="red">"中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
    <br/>目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
</p>
<p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，
    必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。
</p>
<p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。</p>
<hr color="orange" size="4"/>
<!--center标签用于居中-->
<center>
<font color="#808080">江苏传智播客教育科技股份有限公司<br/>
版权所有Copyright © 2006-2018, All Rights Reserved 苏ICP备16007882</font>
</center>
</body>
</html>

小结

案例中我们用到了哪些标签?

font

center

列表标签：有序列表和无序列表

目标

学习有序列表和无序列表的使用

[外链图片转存失败(img-qnE0E6OV-1565448598987)(/1551670700487.png)]

标签介绍

[外链图片转存失败(img-w8qUknUg-1565448598988)(/1551670658102.png)]

案例需求

制作如图所示的菜单列表，左边列是有序列表，右边列是无序列表

效果

[外链图片转存失败(img-AFt7ZRy6-1565448598988)(/1551670700487.png)]

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!--
ol是有序列表，有编号。ol是容器，包含li标签，每个li就是一个列表项
order 有序 list 列表。
type指定编号的类型默认是数字编号
 -->
<h2>有序列表</h2>
<!--1表示数字编号-->
<ol type="1">
    <li>金拱门</li>
    <li>地沟油炒蛋</li>
    <li>红烧狮子头</li>
</ol>
<ol type="A">
    <li>金拱门</li>
    <li>地沟油炒蛋</li>
    <li>红烧狮子头</li>
</ol>
<ol type="I">
    <li>金拱门</li>
    <li>地沟油炒蛋</li>
    <li>红烧狮子头</li>
</ol>

<h2>无序列表</h2>
<!--1表示数字编号-->
<ul type="disc">
    <li>金拱门</li>
    <li>地沟油炒蛋</li>
    <li>红烧狮子头</li>
</ul>
<ul type="circle">
    <li>金拱门</li>
    <li>地沟油炒蛋</li>
    <li>红烧狮子头</li>
</ul>
<ul type="square">
    <li>金拱门</li>
    <li>地沟油炒蛋</li>
    <li>红烧狮子头</li>
</ul>
</body>
</html>

小结

有序列表使用什么标签？

ol-li
无序列表使用什么标签？

ul-li

块标签与内联标签

目标

学习span标签和div标签的作用和区别

span和div介绍

标签	作用	特点
span	都是容器可以包裹其他内容	是内联标签，不带换行功能，用于小范围的内容的划分
div		是块标签，自带换行功能，用于一段的范围的内容划分，通常网页布局使用div将网页分成不同块

[外链图片转存失败(img-aEIqu9DG-1565448598989)(/1556238759067.png)]

div作用

[外链图片转存失败(img-yG54rPCt-1565448598990)(/1551670828108.png)]

<div> 元素是块级元素，浏览器会在其前后显示折行。它是可用于组合其他 HTML 元素的容器。 <div> 元素是英文division，起到分割的意思。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的一个常见的用途是文档布局。

span作用

[外链图片转存失败(img-LdRw8nja-1565448598990)(/1551670912590.png)]

<span>元素是内联元素，可用作文本的容器。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

案例

通过代码认识div和span的功能和特点

效果

[外链图片转存失败(img-VH2jVY7U-1565448598991)(/1551670962184.png)]

万维网联盟又称W3C理事会1994年10月在麻省理工学院计算机科学实验室成立。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span和div</title>
</head>
<body>
<span style="background-color: yellow; color: red;">万维网联盟，又称W3C理事会。</span>1994年10月在麻省理工学院计算机科学实验室成立。
<div style="background-color: yellow; color: red;">万维网联盟，又称W3C理事会。</div>1994年10月在麻省理工学院计算机科学实验室成立。
</body>
</html>

小结

div标签和span标签的主要区别是什么？
span和div都是容器，可以包裹其他内容。

属性：style

区别：

span不换行
div自带换行

实体字符

目标

当页面上需要使用一些特殊符号的时候怎么办呢？

[外链图片转存失败(img-I2YYFSSD-1565448598991)(/1551683446920.png)]

格式

以**&开头，以分号结尾，如：  表示空格**

常用的实体字符表

[外链图片转存失败(img-YKqwYxnH-1565448598992)(/1551683521415.png)]

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实体字符</title>
</head>
<body>
&nbsp;&nbsp;我前面有空格<br/>
大于&gt;<br/>

小于&lt;<br/>

圆&yen;<br/>
与符号&amp;<br/>
双引号&quot;<br/>
版权&reg;
</body>
</html>

小结

所有的实体字符都以什么符号开头&，以什么符号结尾;

&xxx;

图像标签

目标

学习img标签在页面上显示图片

[外链图片转存失败(img-cbMwzxZP-1565448598993)(/1551683566145.png)]

基本语法

<img src="图片文件名"/>
src不能绝对路径

常用属性

属性名	作用
src	指定图片的地址
width	指定图片宽度
height	指定高度
alt	如果图片丢失，出现的替换文字
title	如果鼠标移动到图片上显示的文本信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<!--
src 指定图片的地址
width 指定图片宽度
height 指定高度
alt 如果图片丢失，出现的替换文字
title 如果鼠标移动到图片上显示的文本信息
-->
<img src="img/girl1.jpg" /><br/>
<img src="img/girl1.jpg" width="50%" title="我是漂亮的女生"/><br/>
<img src="img/girl1.jpg" height="500" width="200"/><br/>
<img src="img/girl1.jpg1" alt="我是女生"/>
</body>
</html>

小结

图像标签的格式？

<img src="图片的路径"/>
width: 图片的宽度
height: 图片的高度
title: 鼠标移上显示的文字
alt: 图片找不到显示的问题

案例：家用电器排行榜

目标

制作家用电器排行榜案例

[外链图片转存失败(img-54P1AfWf-1565448598993)(/1551683693058.png)]

步骤分析

家用电器排行榜使用标题标签
水平分割线使用hr
图片使用img标签

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家用电器排行榜</title>
</head>
<body>
<h2>家用电器排行榜</h2>
<!--img是内联标签，不换行-->
<hr color="orange" size="2"/>

<img src="img/tv02.jpg">
索尼KLV-40R476A  55英寸  &yen;3599.00
<hr color="orange" size="2"/>

<img src="img/tv03.jpg">
海信LED93247  50英寸  ¥2486.00
<hr color="orange" size="2"/>

<img src="img/tv04.jpg">
三星98EAC  60英寸  ¥4777.00
<hr color="orange" size="2"/>

<img src="img/tv05.jpg">
创维42E5CHR  42英寸  ¥2799.00
<hr color="orange" size="2"/>
</body>
</html>

小结

在这个案例中我们用到了哪些标签？

img

链接标签：基本使用

目标

学习链接标签的基本语法

[外链图片转存失败(img-BfR5OvUC-1565448598994)(/1551683842614.png)]

语法

<a href="跳转的目的地">内容</a>

属性名	作用
href	跳转的目的地
title	鼠标移动上来显示的文字
target	打开链接的方式 _self: 在本窗口打开 _blank: 在新的窗口打开

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

最低0.47元/天解锁文章

Chosen_ONE026

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20---HTML5语法++

typora-root-url: imgtypora-copy-images-to: img《HTML5-笔记》回顾接口映射文件实现一对一步骤实体类包含另一个实体[外链图片转存失败(img-zhfAqr00-1565448598963)(/1565313108172.png)]配置接口映射文件:association[外链图片转存失败(img-MIKU8vj8-15654...
复制链接

扫一扫