HTML 基础详解

xiaoxiao2021-02-28  7

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命名,使逻辑更加清晰      <div  id="版块名称">…</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>标签:为网页插入图片      <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">      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>
转载请注明原文地址: https://www.6miu.com/read-2250353.html

最新回复(0)