对HTML的初步学习

最新推荐文章于 2024-07-25 11:52:08 发布

丧彪王多多

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量898

点赞数 27

文章标签： html 学习前端

本文链接：https://blog.csdn.net/say_666_/article/details/140565340

版权

一.前端

1.1前端简介

前端就是网站前台部分，运行在pc端，移动端上展示给用户浏览单的网页

1.2前端开发

开发者通过编程呈现出想要的网页的过程就是前端开发

1.3前端技术

1.核心技术：HTML,CSS,JavaScript，Jquery等

2.主流框架：Vue.js,AngularJS,React等

3.应用领域：网站，小程序，WebApp开发等

二.HTML的概述

2.1简介

1.HTML全称叫超文本标记语言，是一种标记语言。包含了一系列具有描述性的标签（标记），通过这些标签将网络文档格式统一，形成一个可以让用户浏览的页面。

2.在编辑时，可用电脑自带的记事本编辑，编辑完之后文件扩展名应为.html。近几年大多使用一款简称VSCode的开发工具，该工具支持丰富的编程语言，是一款功能强大的软件。

3.运行与调试：HTML文本需要使用浏览器来运行，浏览器内置的解析器可以解析HTML的各种标签，一般浏览器也都有HTML的调试工具，比较主流的浏览器有以下几种：Chrome浏览器（谷歌）Edog浏览器（win10/11自带）Firefox浏览器（火狐）Safari浏览器（苹果浏览器）IE浏览器。

2.2HTML基本结构

<!DOCTYPE html>
<html> --------根标记，全文只有一对
<head> --------进行网页的meta设置（规定字符集），可引入css文件，js文件
<title>文档标题</title>
</head>
<body> ----------定义网页的可见部分
可见文本...
</body>
</html>

html中有两个子标记，是head和body

注意：编辑工具的字符集要和网页显示时的字符集一致

2.3HTML语法

1.HTML元素

HTML文档由各种HTML元素组成，元素就是完整的标签。

如：<p> 十个勤天，做大做强！</p>

<p>:开始标签 </p>:结束标签

<br/>换行元素

HTML中的元素可以嵌套。HTML标签对大小写字母不敏感，建议使用小写

具有开始和结束的标签是双标签，类似于<br/>的是单标签

2.HTML属性

属性是HTML元素的附加信息，属性都有对应的属性值（属性值一般用双引号包着）。

如：<div class = "d1"> ---内容---</div>

class是div的属性，d1是属性值

3.HTML注释

，快捷键为ctrl+/，即可

4.HTML字符实体

在HTML中一些特殊字符不能显示在网页的内容上，就需要用字符实体来代替显示不出来的字符，

如:直接编写<符号是不能显示在网页上的，需要用&lt来代替<的编写。常用的有：空格：&nbsp , >:&gt, &:&amp； " :&quot；等等。

三.常用标签

3.1HTML头部

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <base>, <meta>, <style>, <link>, <script> 和 <noscript> 。

1.<title>元素：该元素定义的是文档标签，即网页浏览时显示的标题。

2.<base>元素：规定文档中所有相对 URL 的基准 URL(即父路径)。一个HTML文档里只有一个。

3.<meta>元素：meta元素描述了一些基本的元数据。元数据不显示在页面上，但会被浏览器解析。比如指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

4.<style>元素：一般用于书写内部样式表

如：<head>
<style type="text/css">
body {
background-color:yellow;
}
</style>
</head>

5.<link>标签：标签定义当前文档与外部资源之间的关系。常用于引入外部样式表，

6.<noscript>元素：这个元素可以包含任何 HTML 元素。

如：noscript>
Your browser does not support JavaScript!
</noscript>

3.2HTML基础标签

1.标题标签：通过<h1>到<h6>标签定义，<h1>为最大标题<h6>为最小标题，依次递减分别是<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,属于块级元素。

2.段落标签：HTML 可以将文档分割为若干段落。段落是通过<p>标签定义的。属于块级元素

3.换行标签：</br>使用后可以在新的一行进行编辑内容

4.HTML水平线：<hr>:出现一条水平线，用于分割内容

5.图像标签：用<img/>在页面插入图片，其属性：src（图片路径），alt（指定图像的替代文本），width（宽），height（高）。

6.超链接标签：<a> </a>双标记标签，属性：href（必须写）（链接目标的URL），title（鼠标悬停在超链接上时显示的内容），target（指定链接如何在浏览器中打开），rel（规定当前文档和被链接文档之间的关系）。

超链接默认样式

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

7.按钮标签：<button> 标签定义一个按钮。请始终为 <button> 元素规定 type 属性。不同的浏览器对<button> 元素的 type 属性使用不同的默认值。

3.3文本格式化标签

<strong>加重语气的的文本
<b>加粗,bold的意思
<em>斜体效果，强调作用
<i>斜体效果itatic
<pre>预格式化文本
<small>更小的文本
<code>用于存放计算机代码
<bdo>文字显示的方向
<blockquote> 引用标签
<q> 双引号标签
<del> 删除文本
<ins>插入文本
<sub>下标文本
<sup>上标文本

3.4列表标签

1.无序列表：无序列表是一个项目的列表，列表项使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用<ul>标签，列表项使用<li>标签。

2.有序列表：同样，有序列表也是一列项目，列表项使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li>标签。

3.自定义标签：自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

4.注意事项：列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

3.5表格标签

1.表格：

表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行，每行被分割为若干单元格，表格可以包含标题行(俗称表头)，用于定义列的标题。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

2.标签说明：

<table> 元素表示整个表格，在整体上可以分成四个部分：<caption>，<thead> ，<tbody> 和 <tfoot>

<caption> 为整个表格定义主题
<thead> 表格头部部分(也称表格页眉)。
- <th> 在<thead>中使用<th>元素定义每一列的标题，有加粗效果，与普通单元格区分开来。（table header）
<tbody> 表格主体部分
- <tr> 在<tbody>中使用<tr>元素定义行（table row 的缩写）
- <td> 在<tr>中使用<td>元素定义单元格数据（ table data 的缩写）
<tfoot> 可用于在表格的底部定义摘要、统计信息等内容

3.例子：

<body>
<table border="10px" cellspacing="0" cellpadding="10px" align="center" width="50%">
<caption>学生信息表</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>19</td>
<td>女</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>统计</td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</body>

border: 表的外边框 10像素宽
cellspacing: 单元格之间的距离
cellpadding: 内容区距离单元格边框的距离
align: 表格整体的位置 center left right
width: 表格整体的宽度可以是具体像素，也可以是屏幕的百分比

3.6表单标签

1.HTML 表单用于收集用户的输入信息。HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

2.标签元素介绍：

form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。
<textarea>元素用于创建文本域（多行文本输入控件），可写入字符的字数不受限制。

3.7HTML区块

1.元素分类：

块级元素：在浏览器显示时，通常会以新行来开始（和结束）。常有：<h1>， <p>， <ul>，<ol>， <table>、<form>

内联元素：显示时通常不会以新行开始。常有：<b>, <td>, <a>, <img>等，只要不是独占一行的，都是内联元素

2.<div>元素：属于块级元素，相当于一个容器没有特殊含义，常用于页面的布局

3.<span>元素：内联元素，文本的容器。

3.8浏览器的自动纠正功能

1.浏览器会自动对网页中不符合规范的内容进行纠正

3.9网页布局

常用的网页的布局大致也就是如上图所示的这样的，当然也可以根据实际需求来设计网页的布局。我们可以使用div+css来设计出类似这样的页面结构。

而HTML5更是对类似的页面结构，新定义了一些块级标签

四.HTML5新元素

4.1音频标签

1.<audio> 标签定义声音，比如音乐或其他音频流。

目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

2.属性：

4.2视频标签

1.<video> 标签定义视频，比如电影片段或其他视频流。目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

2.属性：

4.3内联标签（用处少）

<iframe> 标签规定一个内联标签。

一个内联标签被用来在当前 HTML 文档中嵌入另一个文档。

所有主流浏览器都支持 <iframe> 标签。

提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对不支持 <iframe> 的浏览器。

提示：使用 CSS 为 <iframe> （包括滚动条）定义样式。

案例代码：

丧彪王多多

关注

27
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
对HTML的初步学习

前端就是网站前台部分，运行在pc端，移动端上展示给用户浏览单的网页1.HTML全称叫超文本标记语言，是一种标记语言。包含了一系列具有描述性的标签（标记），通过这些标签将网络文档格式统一，形成一个可以让用户浏览的页面。2.在编辑时，可用电脑自带的记事本编辑，编辑完之后文件扩展名应为.html。近几年大多使用一款简称VSCode的开发工具，该工具支持丰富的编程语言，是一款功能强大的软件。
复制链接

扫一扫