HTML入门

最新推荐文章于 2023-06-08 22:12:06 发布

请不要再掉头发了

最新推荐文章于 2023-06-08 22:12:06 发布

阅读量185

点赞数

分类专栏：前端入门文章标签： html 前端入门

本文链接：https://blog.csdn.net/shujiaw/article/details/105665532

版权

前端入门专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、简介

1.1 前端开发核心技术

前端开发最核心的3个技术：HTML、CSS、Javascript

1.1.1 什么是HTML

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

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language）
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
    </head>
    <body>
        <!--有序-->
        <ol>
            <li>
                <pre>!          自动生成一套HTML代码</pre>
            </li>
            <li>
                <pre>tab        增加选中行的缩进</pre>
            </li>
        </ol>
        <!--无序-->
        <ul>
            <li>
                <pre>!          自动生成一套HTML代码</pre>
            </li>
            <li>
                <pre>tab        增加选中行的缩进</pre>
            </li>
        </ul>
       
    </body>
</html>

1.1.2 什么是CSS

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

1.1.3 什么是Javascript

JavaScript是一门脚本语言。

1.2 浏览器内核

浏览器最核心的部分是渲染引擎，一般也称为“浏览器内核”

负责解析网页语法，并渲染（显示）网页
不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同的内核的浏览器中渲染的效果也有可能不同
常见的浏览器内核有
Trident(三叉戟)：IE、360安全浏览器、360极速浏览器、搜狗高速浏览器、百度浏览器、UC浏览器
Gecko（壁虎）：Mozilla Firefox
Presto（急板乐曲）->Blink(眨眼)：Opera
WebKit：safari、360极速浏览器、搜狗高速浏览器、移动端浏览器

二、完整的HTML结构

一个完整的HTML结构包括哪几部分呢？

文档声明
html元素
head元素
body元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.1文档声明

<!DOCTYPE html>

HTML文档声明，告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析识别HTML文档。
必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题
HTML5的文档声明比HTML 4.01、XHTML 1.0简洁非常多

2.2 HTML基本标签

2.2.1 HTML元素

整个网页是从<html>这里开始的，然后到</html>结束。

html元素是HTML文档的根元素，一个文档中只能有一个，其他所有元素都是它的后代元素
W3C标准建议为html元素增加一个lang属性，作用是帮助语音合成工具确定要使用的发音，帮助翻译工具确定要使用的翻译规则
lang="en"表示这个HTML文档的语言是英文
lang="zh"表示这个HTML文档的语言是中文

2.2.2 head元素嵌套的元素

head元素

head素里面的内容是一些“元数据”（元数据：描述数据的数据）

meta元素

可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码，一般都使用UTF-8编码，涵盖了世界上几乎所有的文字

title元素

网页的标题
以下列出的元素大多数情况下都是在head元素内部使用
meta、title、style、link、base、script、noscript

2.2.3 body 标签

<body> 元素定义了 HTML 文档的主体，这个元素拥有一个开始标签<body>，以及一个结束标签</body>。

三、基础内容

3.1 段落与文字

标签	语义	说明
`<h1>`~`<h6>`	header	标题
`<p>`	paragraph	段落
`<a>`	a link	链接
`<img>`	image	图像
`<strong>`	strong	加粗
`<br>`	br	换行
`<hr>`	hr	分割线
`<code>`	code	代码等宽字体

3.2 HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如<br /> ，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使<br> 在所有浏览器中都是有效的，但使用 <br />其实是更长远的保障。

3.3 HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name=“value”。
属性总是在 HTML 元素的开始标签中规定。
始终为属性值加引号

属性	值	描述
class	classname	规定元素的类名（classname）
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline style）
title	text	规定元素的额外信息（可在工具提示中显示）

有些属性是公共的，每一个元素都能设置

class、id、title属性

有些属性是不是公共的，不是每一个元素都能设置

meta元素的chartset属性、img的alt属性

3.4 块元素和行内元素

HTML元素可分为两类：①块元素；②行内元素；

块元素特点：
1.不管内容多少，块元素都会在浏览器中独占一行。可设置宽高，如果不设置宽高那么它的宽度是100%（占满父级元素一整行）
2.块元素内部可以容纳其他块元素或行元素；
常见块元素有：div， h1-h6 ， p ，ul，li，ol， dl，dt, hr，form,table ，tr，td等。
行内元素特点：
1.内容决定所占空间的多少，内容多少就占多少空间。不能设置宽高（默认宽高是0）。margin垂直方向无效（margin-top,margin-bottom）,如果设置垂直方向用line-height属性。多个行内元素排列在一起，他们之间会出现空格。
2.行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：font , span, b , i , u, sub, sup, a等。

3.5 h元素和SEO

3.5.1SEO优化

SEO（Search Engine Optimization）：搜索引擎优化

百度/搜狗/360/Google
h元素有助于网站的SEO优化，可以促进关键词排名
建议在网页中最多只有1个h1元素
乱用h元素不仅不会给网站带来好的权重，同时也有可能被搜索引擎认为作弊，最后导致K站

3.6 字符实体（Character Entity）

HTML中有一些字符是预留出来作特殊用途的，比如小于号（<）大于号（>）
要想在网页中正确地显示这些预留字符，必须使用字符实体，书写格式一般有2种 &entity_name; &#entity_number;
比较常用的有空格：  大于号：> 小于号：< &：&

3.7 重要元素

span元素

span 标签被用来组合文档中的行内元素

默认情况下，跟普通文本几乎没差别
用于区分特殊文本和普通文本，比如用来显示一些关键字

div元素

一般作为其他元素的父容器，把其他元素包住，代表一个整体
用于把网页分割为多个独立的部分

img元素

注意：img元素是单标签
src属性（ src是source的缩写）用来设置图片的路径（URL）

绝对路径：完整的描述文件位置的路径
相对路径：由这个文件所在的文件夹引起的跟其它文件的路径关系
代表当前文件夹（1个.），可以省略
代表上级文件夹（2个.）
对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是 /，而不是 \

注意

img元素如果只设置了width（或height），浏览器会自动根据图片宽高比计算出height（或width）
在HTML5规范中，alt是img元素的必要属性
width、height的默认单位是px，像素

a元素

a元素的作用：定义超链接，用于打开新的URL
常用属性

href（Hypertext Reference）：指定要打开的URL

<a href="https://www.baidu.com">百度一下</a>

target：在哪里打开URL

<p>打开外部网站</p>
   <a href="https://www.baidu.com">百度一下</a>
   <!--target:
        _self(默认值)：自己；
        _blank:空白；
        和iframe一起使用时才有效果
        _parent
        _top
    -->
    <div>
        <a href="https://www.baidu.com" target="_blank">百度一下</a>
    </div>
    <p>打开自己的网站</p>
    <a href="./01_HelloWorld.html">打开网页</a>
    <div>
        <a href="https://www.baidu.com" target="_parent">百度一下</a>
    </div>
    <div>
        <a href="https://www.baidu.com" target="_top">百度一下</a>
    </div>

target可以有以下几种取值

_self：默认值，在当前窗口打开URL
_blank：在一个新的窗口中打开URL
_parent：在父窗口中打开URL
_top：在顶层窗口中打开URL
某个frame的name值：在某个frame中打开URL

iframe元素

利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档
frameborder属性

用于规定是否显示边框
1：显示
0：不显示

<iframe src="https://www.baidu.com"
            width="1000"
            height="1000"
            frameboder="1">
    </iframe>

base元素

可以利用base元素设置当前页面所有a元素的默认行为
base元素写在head元素中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <base href="https://www.baidu.com">
</head>
<body>
    <a href="">百度一下</a>
    <a href="/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=abc">abc</a>
</body>
</html>

3.8 链接

HTML 超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
我们通过使用<a> 标签在 HTML 中创建链接。
有两种使用<a>标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签

HTML 链接语法

<a href="http://www.baidu.com">百度一下</a>

HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

<p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

超链接根据链接对象的不同分为：

（1）外部链接

（2）内部链接：①内部页面链接；②锚点链接；

<a href="#one">go</a>

点击go会定位到
id值为one的元素
name值为one的a元素

HTML 伪链接

有时候点击链接的时候并不希望打开新的URL，而是希望干点别的事情，这时可以使用伪链接
伪链接：没有指明具体链接地址的链接
点击链接后具体要做什么事情，需要编写对应的JavaScript代码
如果暂时不做任何事，可以先写成下面形式

<a href="#" onclick="return false;">伪链接</a>
<a href="#">伪链接2</a><!--跳到顶部-->
<a href="javascript:alert('内容')">弹出一个弹窗</a>

请不要再掉头发了

关注

0
点赞
踩
0

收藏

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

目录一、简介1.1 前端开发核心技术1.1.1 什么是HTML1.1.2 什么是CSS1.1.3 什么是Javascript1.2 浏览器内核二、HTML基础内容2.1 HTML 空元素2.2 HTML基本标签2.2.1 HTML标签2.2.2 body 标签2.3 段落与文字2.4 HTML 属性2.5 块元素和行内元素一、简介1.1 前端开发核心技术前端开发最核心的3个技术：HTML、C...
复制链接

扫一扫

专栏目录