前端新手HTML入门

最新推荐文章于 2024-07-24 21:45:01 发布

Big邓锋

最新推荐文章于 2024-07-24 21:45:01 发布

阅读量278

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/weixin8feng/article/details/106038475

版权

第一天学习目标

了解wed前端—开发工具
了解常用浏览器
掌握WEB标准
理解标签语义化
掌握常用的排版标签
掌握常用的文本格式化图像链接等标签
掌握三种列表标签
掌握表格标签
掌握表格标签
掌握表单标签

第二天目标

能够写出基本的页面（里面包含图片、各种标签和链接）

———————————————————————————————————————————————

wed前端—开发工具

wed前端—开发工具视频

———————————————————————————————————————————————

常用浏览器

浏览器是网页显示、运行的平台，常用的浏览器有IE浏览器（Internet explorer）、火狐（Firefox）、谷歌（Chrome）、Safari浏览器和Opera浏览器等。我们平时称为五大浏览器。

浏览器内核（理解）

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS 引擎则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Webkit、Trident、Gecko、Blink。

在介绍一下内核

WebKit:
WebKit是一个开源项目，是现在流行的渲染引擎之一，很多浏览器都在使用它，比如苹果的Safari。

Trident:
Trident是微软开发的渲染引擎，又叫MSHTML.但没有开源，也是比较流行的渲染引擎之一。

Gecko
Firefox所使用的渲染引擎就是它，是网景公司在20世纪90年代为其浏览器Netscape Navigator开发的渲染引擎。

Blink
2013年，谷歌宣布从WebKit分支出来，创建了渲染引擎Blink。

了解一点：移动端的浏览器内核主要说的是系统内置浏览器的内核。
Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。

iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的

———————————————————————————————————————————————

Web标准

web标准的好处

1、让Web的发展前景更广阔

2、内容能被更广泛的设备访问

3、更容易被搜寻引擎搜索

4、降低网站流量费用

5、使网站更易于维护

6、提高页面浏览速度

———————————————————————————————————————————————

web标准的结构

结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。最重要
表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript

———————————————————————————————————————————————

标签语义化，什么是HTML?

HTML 是用来描述网页的一种语言。
注意体会：文本标签语言几个词语

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

———————————————————————————————————————————————

<!DOCTYPE> 声明

【!DOCTYPE】声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

【doctype】声明是不区分大小写的，以下方式均可：
在这里插入图片描述

———————————————————————————————————————————————

HTML页面结构

在这里插入图片描述

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，
如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

———————————————————————————————————————————————

HTML标签分类

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 HTML、head、body都是HTML页面结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素

1.双标签

<标签名> 内容 </标签名>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。

比如: 
<p> 文本内容 </p>

2.单标签

<标签名 />

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。

比如:  
<br />

HTML标签关系

标签的相互关系就分为两种：

1.嵌套关系

比如：
<head>  <title> </title>  </head>

2.并列关系

比如：
<head></head>
<body></body>

———————————————————————————————————————————————

掌握常用的排版标签

注意：HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。

标题标签（熟记）

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

其基本语法格式如下：

<h1>   标题文本   </h1>

段落标签（熟记）

<p>  文本内容  </p>

水平线标签（认识）

<hr />是单标签

换行标签（熟记）

<br />

div span标签(重点)

div span 是没有语义的是我们网页布局主要的2个盒子 div+css

div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。

span, 跨度，跨距；范围

语法格式：

<div> 这是真盒子 </div>    <span>这是假盒子</span>

文本格式化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<b>这是b的粗体效果</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>这是strong的粗体效果</strong><br />
		<i>这是i的斜体效果</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<em>这是em的斜体效果</em><br />
		<s>这是s加删除线效果</s>&nbsp;&nbsp;&nbsp;&nbsp;<del>这是del加删除线效果</del><br />
		<u>这是u加下划线效果</u>&nbsp;&nbsp;&nbsp;&nbsp;<ins>这是ins加下划线效果</ins>
	</body>
</html>

b i s u 只有使用没有强调的意思 strong em del ins 语义更强烈

标签属性

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

在上面的语法中，

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值，省略该属性则取默认值。

采取键值对的格式 key=“value” 的格式

比如:
<hr width="400px" />hr属性 宽度 值是400像素

———————————————————————————————————————————————

图像标签img（重点）

1、img是image的缩写
该语法中src属性用于指定图像文件的路径和文件名，它是img标签的必须属性。

src：图像的路径。

title：用来告诉浏览器，当鼠标悬停在图片时显示的内容。

alt ：是英文alternate的缩写，用来告诉浏览器当需要显示的图片找不到时显示的内容。

src，title，alt是img主要的属性，其他属性可以通过CSS层叠样式设置。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lianxi</title>
    <base target="_blank">
</head>

<body>
	<img src="./assets/images/blog/b2.jpg" title="危险">
    <img src="./assets/images/clients/c211.png" alt="帅哥"><br>
</body>
</html>

在这里插入图片描述
2、通过相对路径赋值：

– 相对路径就是每次都是从.html文件所在文件夹开始查找

2.1 同级：是图片存放的位置和.html文件存储在同一个文件夹中，

格式：src = “Figure_1.png”

含义：在.html文件所在的文件夹中查找名称叫做Figure_1.png的图片

2.2 下级：是存储图片的文件夹和.html文件在同一个文件夹中

格式：src = “Images/Figure_1.png”

含义：在.html文件所在的文件夹中查找名称叫做Images的文件夹中找到名称叫做Figure_1.png的图片

2.3上级：存储图片的位置在存储.html的文件夹的上一级

格式：src = “…/Figure_1.png”

含义：在.html文件所在的文件夹中查找这个文件夹的上一级文件夹，然后再在这个上一级文件夹中找到名称叫做Figure_1.png的图片

2、通过绝对路径赋值

– 绝对路径就是每次都从指定的盘符开始查找

———————————————————————————————————————————————

链接标签(重点)

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

文本或图像
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lianxi</title>
    <base target="_blank">
</head>

<body>
    <a href="https://www.baidu.com/">百度</a>&nbsp;&nbsp;<a href="index.html">首页</a>&nbsp;&nbsp;<a href="#">空链接</a>
</body>

</html>

注意：

1.外部链接需要添加 http:// www.baidu.com

2.内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页（需要自己创建一个“index.html”文件）

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.base 可以设置整体链接的打开状态
base 写到之间
把所有的连接都默认添加 target="_blank"

5.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位（难点）

通过创建锚点链接，用户能够快速定位到目标内容。

创建锚点链接分为两步：

1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）   <a href="#div1">   
2.使用相应的id名标注跳转目标的位置。   <h3 id="div1">第1集</h3>

这里我就找其他博客大神的文章学习

———————————————————————————————————————————————

html实体字符标签（理解）

HTML实体字符标签了解即可用到再百度

这里我就找其他博客大神的文章学习

———————————————————————————————————————————————

注释标签

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：

<!-- 注释语句 -->    快捷键一般是： ctrl + /  或者 ctrl +shift + / 
<!-- <p>蜘蛛网的意思</p> -->

列表标签

无序列表 ul （重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

注意：

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

有序列表 ol （了解）

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

所有特性基本与ul 一致，但是实际工作中比较少用做导航栏。（常用ul列表标签）

———————————————————————————————————————————————

表格 table(会使用)

创建表格
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

<table>
  <tr>
    <td>单元格内的文字</td>
  </tr>
  <tr>
    <td>单元格内的文字</td>
  </tr>
</table>

上面的语法中包含三对HTML标签，分别为 table</table、tr</tr、td</td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释
1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对中包含几对，就表示该行中有多少列（或多少个单元格）。

注意：

 1. <tr></tr>中只能嵌套<td></td>
 2. <td></td>标签，他就像一个容器，可以容纳所有的元素

[这里我就找其他博客大神的文章学习

学习表格总结

表格提供了HTML 中定义表格式数据的方法。
表格中由行中的单元格组成。
表格中没有列元素，列的个数取决于行的单元格个数。
表格不要纠结于外观，那是用CSS 设置样式。

———————————————————————————————————————————————

表单标签(掌握)

input 控件(重点)

在上面的语法中，input /标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，input /标签还可以定义很多其他的属性，其常用属性如下表所示。
在这里插入图片描述
这里我就找其他博客大神的文章学习

Big邓锋

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端新手HTML入门

第一天学习目标了解常用浏览器掌握WEB标准理解标签语义化掌握常用的排版标签掌握常用的文本格式化图像链接等标签掌握三种列表标签掌握表格标签掌握表格标签掌握表单标签第二天目标能够写出基本的页面（里面包含图片、各种标签和链接）常用浏览器浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。...
复制链接

扫一扫