HTML 基础详解

最新推荐文章于 2022-05-05 11:03:04 发布

程序员学习圈

最新推荐文章于 2022-05-05 11:03:04 发布

阅读量632

点赞数

分类专栏： # Java WB 文章标签： html

本文链接：https://blog.csdn.net/Luomingkui1109/article/details/78614330

版权

Java WB 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.HTML简介

(1) 什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

我们一般将一个网页分为三个部分：结构、表现、行为。结构使用HTML，表现使用CSS，行为使用JavaScript。

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

(2) HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如 <b> 和 </b>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

(3) HTML 文档 = 网页

HTML 文档描述网页

HTML 文档包含 HTML 标签和纯文本

HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

例子解释：

<html> 与 </html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

<h1> 与 </h1> 之间的文本被显示为标题

<p> 与 </p> 之间的文本被显示为段落

2.HTML标签：

<--声明当前网页的版本，这个声明表示当前网页使用的是html5-->
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8" />
    <title>表头的名字</title>
    </head>
    <body>
    <!-- 网页主体内容 -->
    </body>
</html>

<html></html>称为根标签，所有的网页标签都在<html></html>中。

<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。

在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

常用标签详细讲解如下：

(1) 标题标签：<hx>标题文本</hx> (x为1-6)

(2) 段落标签：<p>段落</p>

(3) <strong>和<em>标签：

有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或<strong>标签。

但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。

(4) <span>标签为文字设置单独样式：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
span{
    color:blue;
}
</style>
</head>
<body>
    <p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
    <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>

(5) <q>标签，短文本引用：注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。

(6) <blockquote>标签，长文本引用。

(7) 换行标签：<br />。

(8) 为网页中添加空格:  

(9) <hr>:添加水平横线。

(10) <address>标签，为网页加入地址信息。

(11) <code>标签: 加入一行代码。<code>代码语言</code>，如果是多行代码，可以使用<pre>标签。

(12) 使用ul，添加新闻信息列表:

ul-li是没有前后顺序的信息列表。

ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点。

(13) 使用ol，添加图书销售排行榜:

<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>

<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始。

(14) div

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

(15) div命名，使逻辑更加清晰

(16) 用css样式，为表格加入边框

Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。

(17) caption标签，为表格添加标题和摘要.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
<style type="text/css">
table tr td,th{
    border:1px solid #000;
}
</style>
</head>
<body>
<table summary="表格简介文本">
  <caption>标题文本</caption>
  <tr>
    <th>产品名称 </th>
    <th>品牌 </th>
    <th>库存量（个） </th>
    <th>入库时间 </th>
  </tr>
  <tr>
    <td>耳机 </td>
    <td>联想 </td>
    <td>500</td>
    <td>2013-1-2</td>
  </tr>
  <tr>
    <td>U盘 </td>
    <td>金士顿 </td>
    <td>120</td>
    <td>2013-8-10</td>
  </tr>
  <tr>
    <td>U盘 </td>
    <td>爱国者 </td>
    <td>133</td>
    <td>2013-3-25</td>
  </tr>
</table>
</body>
</html>

(18) <a>标签: 超链接

<a href="目标网址" target="_blank" title="鼠标滑过显示的文本">链接显示的文本</a>

href 指向的是一个连接的地址

target 指定在哪个窗口中打开链接

_blank 在新窗口中打开

_self 在当前窗口打开（默认）

(19) <img>标签:为网页插入图片

src：标识图像的位置；

alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

图像可以是GIF，PNG，JPEG格式的图像文件。

(20) 表格

<!-- table代表的是表格 而在table中的border="1"是为表格加边框使用的-->
<table border="1">
<!--tr代表的是表格中的行，而td代表的是表格中的列 -->
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>    
说明：在列中可以设置属性
     < td rowspan ="2" align ="right"></td>   其中rowspan ="2"跨行显示，alight属性用于设置在该行中的位置。
     < td colspan= "2" align="center" ></td>  其中colspan= "2"属性用于合并单元格。

(21) 表单：表单是用来向服务器提交数据

说明：form代表的是表单，action是表单提交之后跳转的页面，而下面的提交按钮就是用于表单的提交的。

<form action="">
文本框：<input type="test" name="" />
密码框: <input type="password" name="" />
单选按钮：<input type="radio" name="" value="" />
多选框: <input type="checkbox" name="" value="" />
下拉列表：
<select name="性别">
<option value="男">男</option>
<option value="女">女</option>
</select>
使用下拉列表框进行多选:
<label>爱好:</label>
    <select multiple="multiple">
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
</select>
提交按钮：<input type="submit" value="按钮上的文字" />
重置按钮： <input type="reset" value="重置">
</form>

(22) form表单中的label标签

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

语法： <label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form中的lable标签</title>
</head>

<body>
<form>
   <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <br />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">

</form>

</body>
</html>

3.HTML中DIV与SPAN的区别:

div是块级元素，实际上就是一个区域，主要用于容纳其他标签。默认的display属性是block

span是行内元素，主要用于容纳文字。默认的display属性是inline

看看如下：

<html>
<body>
test<span>紧跟前面的"test"显示</span><div>而这里会另起一行显示</div>
</body>
</html>

程序员学习圈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录