java后端工程师成长路线------(前端) HTML简介

1. HTML简介

1.1概述

  • HTML 是 HyperText Mark-up Language 的⾸字⺟简写,意思是 超⽂本标记语⾔
  • HTML不是⼀种编程语⾔,⽽是⼀种标记语⾔
  • 超⽂本指的是超链接,标记指的是标签,是⼀种⽤来制作⽹⻚的语⾔,这种语⾔由⼀个个的标签组成
  • ⽤这种语⾔制作的⽂件保存的是⼀个⽂本⽂件,⽂件的扩展名为 .html 或者 .htm
  • html⽂档也叫 Web⻚⾯ ,其实就是⼀个⽹⻚,html⽂件⽤ 编辑器打开 显示的 是⽂本 ,可以⽤⽂本 的⽅式 编辑它
  • 如果⽤ 浏览器打开 ,浏览器会按照标签描述内容将⽂件 渲染成⽹⻚ ,显示的⽹⻚可以从⼀个⽹⻚链接跳转到另外⼀个⽹⻚

1.2 HTML的版本发展历史

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iHBbNF2s-1601170150041)(C:\Users\YANG\Desktop\HTML课件与笔记(5)]\作业\1. HTML简介.assets\image-20200926141641756.png)

1.3 HTML⽂档类型

HTML在不同版本下⽂档类型的设定,即 <!Doctype > 对应的属性值。

(1) HTML , 对应早期的 HTML4.0.1, 其基本结构如下:

Document ```

(2) XHTML ,其基本结构如下:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 <head>

 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

 <title>Document</title>

 </head>

 <body>

 

 </body>

 </html>

(3) HTML5 ,其基本格式如下

<!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <meta name="viewport"

 content="width=device-width, user-scalable=no, initial-scale=1.0,

maximum-scale=1.0, minimum-scale=1.0">

 <meta http-equiv="X-UA-Compatible" content="ie=edge">

 <title>Document</title>

 </head>

 <body>
 </body>

 </html>

2. HTML基础语法

2.1 HTML基本结构

  • HTML⽂件的扩展名为 .html 或者 .htm

  • HTML⽂本的结构包括“头”部分(head)、和“主体”部分(body),其中“头”部提供关于⽹⻚的信息,“主体”部分提供⽹⻚的具体内容

  • HTML是由: 标签 和 内容 构成, 每个HTML⻚⾯都有两部分构成(head头和body体),其最外层是 <html>...</html> 标签包裹

  • HTML标签(标记)的语法是由 < 和 > 括起来。

  • HTML标签有两种: 双标签 : <标签名>…</标签名> 和 单标签 : <标签名 />

  • HTML标签中还可以添加属性: <标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>…</标签名>

  • HTML标签规范:标签名⼩写、属性使⽤双引号、标签要闭合。

    ​ 规范不遵守浏览器不会报错,会尽量解析,解析不了的会显示不了效果

    <!DOCTYPE html>
    <html lang="en">
     <head>
     <meta charset="UTF-8">
     <title>⽹⻚标题</title>
     <!-- 此处可以写各种⻚头属性设置、CSS样式和JavaScript脚本等... -->
     </head>
     <body>
     ⽹⻚显示内容
     </body>
    </html>
    

2.2 HTML注释

html⽂档代码中可以插⼊注释,注释是对代码的说明和解释

格式

<!-- 这就是唯⼀的⼀种HTML注释了 --> 

2.3 HTML中HEAD头部设置

  • head标签作⽤于⽹⻚的头部,它的内容不会在正⽂中显示出来,主要完成对当前⻚⾯的各种设置

  • 在head中常包含如下⼦标签:

  • 标签描述示例
    <title>定义了⽂档的标题⽹⻚标题: <title>本⽹⻚标题</title>
    <base>定义了⻚⾯链接标签的默认 链接地址<base href="http://www.****.com/"target="_blank">
    <link>定义了⼀个⽂档和外部资源 之间的关系导⼊CSS⽂件 <link type="text/css" rel="stylesheet" href="**.css"/>
    <meta>定义了HTML⽂档中的元数 据 设置⽹⻚编码、关键字、描述<meta charset="utf-8"/> <meta name="Keywords" content="关键字" /> <meta name="Description" content="简介、 描述" />
    <script>定义了客户端的脚本⽂件<script > JavaScript脚本程序 </script>
    <style>定义了HTML⽂档的样式⽂件<style type="text/css">嵌⼊css样式代码

示例:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>⽹⻚标题</title>
 <meta name="Keywords" content="关键字" />
 <meta name="Description" content="简介、描述" />
 <link type="text/css" rel="stylesheet" href="**.css"/>
 <style type="text/css">
 嵌⼊css样式代码
 </style>
 <script >
 JavaScript脚本程序
 </script>
 </head>
 <body>
 <h3>⽹⻚显示内容</h3>
 </body>
</html>

3.文本标签

3.1常用的文本标签

<hn>...</hn> 其中n为1--6的值。 标题标签(加粗、独⽴⾏)
<i>...</i> 斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗
<cite></cite> 作品的标题(引⽤)
<sub>...</sub> 下标 <sup>...</sup> 上标
<del>...</del> 删除线

3.2示例

<!DOCTYPE html>
<html lang="en"> <head>
 <meta charset="UTF-8">
 <title>⽂本标题示例</title>
</head> 
    <body>
 <h3>HTML标签实例--⽂本标签</h3>
 <h1>h1标题</h1>
 <h2>h2标题</h2>
 <h3>h3标题</h3>
 <h4>h4标题</h4>
 <h5>h5标题</h5>
 <h6>h6标题</h6>
 <i>i: 斜体标签</i> <br/>
 <em>em: 强调斜体标签</em> <br/>
 <b>b: 加粗标签</b><br/><br/>
 <strong>strong: 强调加粗标签</strong><br/>
 <del>del: 删除线</del><br/>
 <u>u: 下划线</u> <br/><br/>
 ⽔分⼦:H<sub>2</sub>O <br/>
 4<sup>2</sup>=16
</body>
</html>

3.3HTML中的的字符实体

实体名称对⼤⼩写敏感

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ptaYwfoO-1601170150043)(C:\Users\YANG\Desktop\HTML课件与笔记(5)]\作业\1. HTML简介.assets\image-20200926144225551.png
)

4.HTML格式化标签

常⻅格式化标签

  1. <br/> 换⾏

  2. <p>...</p> 换段

  3. <hr /> ⽔平分割线

  4. 列表:

    • <ul>...</ul> ⽆序列表

    • <ol>...</ol> 有序列表 其中type类型值:A a I i 1 start属性表示起 始值

    • <li>...</li> 列表项

      • <dl>...</dl>⾃定义列表
      • <dt>...</dt> ⾃定义列表头
      • <dd>...</dd> ⾃定义列表内容

<div>...</div> 常⽤于组合块级元素,以便通过 CSS 来对这些元素进⾏格式化

<span>...</span> 常⽤于包含的⽂本,您可以使⽤ CSS 对它定义样式,或者使⽤ JavaScript 对它进⾏操作。

示例代码:

<html lang="en"> 
<head>
 <meta charset="UTF-8">
 <title>HTML标签实例--格式化标签</title>
</head> 
<body>
  <h3>HTML介绍</h3>
 <p>超⽂本标记语⾔(Hyper Text Markup Language),标准通⽤标记语⾔下的⼀个应⽤。HTML 不
是⼀种编程语⾔,⽽是⼀种标记语⾔ (markup language),是⽹⻚制作所必备的。</p>
 <p>“超⽂本”就是指⻚⾯内可以包含图⽚、链接,甚⾄⾳乐、程序等⾮⽂字元素。<br/>
 超⽂本标记语⾔的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提
供关于⽹⻚的信息,“主体”部分提供⽹⻚的具体内容。</p>
 <hr/>
 <!-- 列表标签 -->
 你的爱好:
 <ul>
 <li>看书</li>
 <li>上⽹</li>
      <li>爬⼭</li>
 <li>唱歌</li>
 </ul>
 <ol type="a">
 <li>看书</li>
 <li>上⽹</li>
 <li>爬⼭</li>
 <li>唱歌</li>
 </ol>
 <dl>
 <dt>问:HTML?</dt>
 <dd>答:超⽂本标记语⾔</dd>
 <dt>问:HTML?</dt>
 <dd>答:超⽂本标记语⾔</dd>
 <dt>问:HTML?</dt>
 <dd>答:超⽂本标记语⾔</dd>
 </dl>
 <div>aaa</div>
 <div>bbb</div>
 <span>aaaa</span><span>bbbb</span>
</body>
</html>

5.HTML图像标签

5.1概述

在HTML⽹⻚中插⼊⼀张图⽚,使⽤img标签,他是⼀个单标签: <img />

5.2常⽤属性

属性描述
src图⽚名及url地址
alt图⽚加载失败时的提示信息
title⽂字提示属性
width图⽚宽度
height图⽚⾼度
border边框线粗细

5.3绝对路径和相对路径

5.3.1绝对路径

  • 绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径,(URL和物理路径)

    例如:

    ​ C:\xyz\test.txt 代表了test.txt⽂件的绝对路径。

    ​ http://www.sun.com/index.htm也代表了⼀个URL绝对路径。

5.3.2相对路径

  • 相对与某个基准⽬录的路径。包含Web的相对路径(HTML中的相对⽬录),

    ​ 例如:在Web开发中,"/"代表Web应⽤的根⽬录。

  • 和物理路径的相对表示,

    ​ 例如:"./" 代表当前⽬录,

    ​ "…/"代表上级⽬录。这种类似的表示,也是属于相对路径。

示例代码:

<!DOCTYPE html>

<html lang="en"> 

<head>

 <meta charset="UTF-8">

 <title>Document</title>

</head> 

<body>

 <h3>HTML标签实例--图⽚标签</h3>

 <img src="./images/a.jpg" title="图⽚" width="300" />

 <img src="./images/add.jpg" alt="⼆⽉兰花图⽚" width="300" />

 <img src="./images/a.jpg" width="280" border="2" />

</body>

</html>

运⾏效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-12MSA04L-1601170150044)(C:\Users\YANG\Desktop\HTML课件与笔记(5)]\作业\1. HTML简介.assets\image-20200926145752138.png)

6.HTML超链接标签

6.1概述

  • 超级链接标签<a>
  • 格式:<a href="链接⽬标url地址">显示⽂字</a>

6.2属性

属性描述
href必须,指的是链接跳转地址
target表示链接的打开⽅式:
_blank新窗⼝
_parent⽗窗⼝
_self本窗⼝(默认)
_top顶级窗⼝
framename窗⼝名
title⽂字提示属性(详情)

6.3锚点链接

  • 定义⼀个锚点:<a id="a1"></a>以前使⽤的是 <a name="a1"></a>
  • 使⽤锚点: <a href="#a1">跳到a1处</a>

示例代码:

<!DOCTYPE html>
<html lang="en"> 
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head> 
<body>
 <h1>HTML标签实例--超级链接标签</h1>
 <a href="http://www.baidu.com" title="百度链接" target="_blank">百度</a>
 本地链接:<a href="3.html">3.html</a>
 锚点:<a href="#myimg">我的照片</a> 
<br/>
 <hr/>
 <img src="./images/11.jpg" title="图⽚" width="700" />
 <img src="./images/22.jpg" alt="美⼥图⽚" width="700" />
 <a id="myimg"></a>
 <img src="./images/33.jpg" width="700" />
 <img src="./images/44.jpg" width="700" />
    </body>
</html>

7. HTML表格标签

表格中的标签:

表格描述常⽤属性
<table>定义表格border、width、cellspacing、cellpadding
<caption>定义表格标题align排列⽅式
<th>定义表格的表头align,valign,bgcolor、rowspan、colspan、width、height
<tr>定义表格的⾏align,valign,bgcolor
<td>定义表格单元格align,valign,bgcolor、rowspan、colspan、width、height
<thead>定义表格的⻚眉align,valign
<tbody>定义表格的主体align,valign
<tfoot>定义表格的⻚脚align,valign
<!DOCTYPE html>
<html lang="en"> <head>
 <meta charset="UTF-8">
 <title>Document</title>
</head> <body>
 <h3>HTML标签实例--表格标签</h3>
 
 <table border="1" width="700" cellspacing="0" cellpadding="4">
 <caption><h3>学⽣信息表</h3></caption>
 <tr>
 <th>学号</th>
 <th>姓名</th>
 <th>年龄</th>
 <th>班级</th>
 </tr>
 <tr>
 <td>1001</td>
 <td>张三</td>
 <td>22</td>
 <td>java04</td>
 </tr>
 <tr>
 <td>1002</td>
 <td>李四</td>
 <td>22</td>
     <!--占两行-->
 <td rowspan="2">python04</td>
 </tr>
 <tr>
 <td>1003</td>
      <!--占两列-->
 <td colspan="2">王五</td>
 </tr>
 </table>
</body>
</html>

8.HTML表单标签

8.1form表单

8.1.1格式

<form>...</form>表单标签

8.1.2常用属性

属性描述
action属性提交的⽬标地址(URL)
method属性提交⽅式 get(默认)/post
enctype提交类型
target在何处打开⽬标 URL。
name属性为表单起个名字.在HTML5中使⽤ id

8.2 <input>

8.2.1概述

标签input定义输⼊字段,⽤户可在其中输⼊数据。在 HTML 5 中,type 属性有很多新的值。

8.2.2格式

举例:

<input type="text" name="username">

类型为text,文本 名字为username

8.2.3属性

属性描述
name属性表单项名,⽤于存储内容值的
value属性输⼊的值(默认指定值)
placeholder预期值的简短的提示信息
size属性输⼊框的宽度值
maxlength属性输⼊框的输⼊内容的最⼤⻓度
readonly属性对输⼊框只读属性
disabled属性禁⽤属性
checked属性对选择框指定默认选项
accesskey属性指定快捷键(不常⽤) (IEalt+键 ⽕狐alt+shift+键)
tabindex属性通过数字指定tab键的切换顺序(不常⽤)

src和alt是为图⽚按钮设置的

注意:

  • reset重置按钮是将表单数据恢复到第⼀次打开时的状态,并不是清空
  • image图⽚按钮,默认具有提交表单功能。

type属性的值

text单⾏⽂本框
password密码输⼊框
checkbox多选框 注意要提供value值
radio单选框 注意要提供value值
file⽂件上传选择框
button普通按钮
submit提交按钮
image图⽚提交按钮
reset重置按钮, 还原到开始(第⼀次打开时)的效果
hidden主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改
email⽤于应该包含 e-mail 地址的输⼊域
url⽤于应该包含 URL 地址的输⼊域
number⽤于应该包含数值的输⼊域。
range⽤于应该包含⼀定范围内数字值的输⼊域,显示为滑动条
Date pickers⽇期选择器
search⽤于搜索域,⽐如站点搜索
color颜⾊选择

当type为range/number可以选用以下属性

属性描述
max规定允许的最⼤值
min规定允许的最⼩值
step规定合法的数字间隔(如果step=“3”,则合法的数是-3,0,3,6等)
value规定默认值

当type为Date pickers可以选用以下属性

属性描述
date选取⽇、⽉、年
month选取⽉、年
week选取周和年
time选取时间(⼩时和分钟)
datetime选取时间、⽇、⽉、年(UTC 时间)
datetime- local选取时间、⽇、⽉、年(本地时间)

8.3<select>

8.3.1格式

<select>...</select> 标签创建下拉列表。

8.3.2属性

属性描述
name属性定义名称,⽤于存储下拉值的
Size定义菜单中可⻅项⽬的数⽬,html5不⽀持
disabled当该属性为
true时,会禁⽤该菜单。
multiple多选

8.3.3<option>

<option>... </option> 下拉选择项标签,⽤于嵌⼊到<select>标签中使⽤的;

  • value属性:下拉项的值

  • selected属性:默认下拉指定项.

8.4<textarea>

8.4.1格式

<textarea>...</textarea> 多⾏的⽂本输⼊区域

8.4.2属性

name :定义名称,⽤于存储⽂本区域中的值。

cols :规定⽂本区内可⻅的列数。

rows :规定⽂本区内可⻅的⾏数。

disabled: 是否禁⽤

readonly: 只读

默认值是在两个标签之间

8.5<button>

  • <button>...</button> 标签定义按钮。
  • 您可以在 button 元素中放置内容,⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。

8.6<fieldset>

<fieldset> 元素可将表单内的相关元素分组。

disabled属性:定义 fieldset 是否可⻅。

form属性: 定义该 fieldset 所属的⼀个或多个表单。

8.7<legend>

<legend></legend>– 标签为 <fieldset> 、 <figure> 以及`` ` 元素定义标题。

```html 个⼈信息:

姓名:

年龄:



健康信息:

身⾼:

体重:

```

8.8<optgroup>

<optgroup>html5新增标签–

<optgroup>标签定义选项组。此元素允许您组合选项

城市:
<select name="city">


 <optgroup label="河北省">

 <option>⽯家庄</option>

 <option>保定</option>

 <option>廊坊</option>

 </optgroup>

 <optgroup label="河南省">

 <option>郑州</option>

 <option>安阳</option>

 <option>周⼝</option>

 </optgroup>

</select>

8.9<datalist>

<datalist> </datalist>html5标签

<datalist>标签定义可选数据的列表。与 input 元素配合使⽤,就可以制作出输⼊值的下拉列表。

<form action="demo_form.php" method="get">

 搜索:

 <input type="search" list="namelist" name="keywords"/>

 <datalist id="namelist">


 <option value="zhangsan">

 <option value="zhangsanfeng">

 <option value="zhangwuji">

 <option value="lisi">

 <option value="lixiaolong">

 </datalist>

</form>

9. HTML框架标签

属性:
src:规定在 iframe 中显示的⽂档的 URL

name:规定 iframe 的名称

height:规定 iframe 的⾼度。

width:定义 iframe 的宽度。

frameborder:规定是否显示框架周围的边框。

例如:

<iframe src="1.html" name="myframe" width="700" height="500"></iframe>

10. HTML5

新增布局标签

标签作⽤
header定义⽂档的⻚眉
nav定义导航链接部分
footer定义⽂档或者节的⻚脚/底部
article定义⽂章
section定义⽂档中的节(section/段落)
aside定义其所处内容之外的内容/侧边
datalist定义选项列表,与input 配合使⽤该标签,两者通过id关联
fifieldset可将表单内的相关元素打包/分组, 与legend 搭配使⽤

的宽度。

frameborder:规定是否显示框架周围的边框。

例如:

<iframe src="1.html" name="myframe" width="700" height="500"></iframe>
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值