HTML 第一周

Electrojay

已于 2023-05-05 00:35:17 修改

阅读量75

点赞数

文章标签： html

于 2023-05-05 00:33:46 首次发布

本文链接：https://blog.csdn.net/melonxxx/article/details/130497960

版权

HTML 第一周

HTML是什么？

HTMl是一种描述网页的语言，它是标记语言；HTML用标记标签来描述网页；HTML 文档包含了HTML 标签及文本内容；HTML文档也叫做 web 页面

HTML标签

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

标签是成对出现的，比如< html >和< /html >

< html >是开始标签，< /htlm > 是结束标签

下面给个例子

<!DOCTYPE html>
<html>
    <head>
        <title>electrojay's World</title>
    </head>
    <body>
        <h1>Welcome to my first Web</h1>
        <img src = "electrojay.jpg" alt="electrojay" width="304" height="304">
        <p>
            Join us any eventhing for refreshing elixirs,
            conversation and  maybe a game or
            two of <em>Electrojay</em>
            Thanks you! 
        </p>
        <h3>OK!</h3>
        <p>
            I will study the knowledge about web and protect it!
        </p>
    </body>
</html>

以上就是较为基本的标签和元素，元素是啥？

HTML元素

“HTML 标签” 和 “HTML 元素” 正常来说没啥区别，

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>
  	这个是一个元素，同时他也是一个段落
</p>

web浏览器

它是用来读取我们的html文件，转化成网页显示

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户

例如我之前给出的例子

HTML 网页结构

正如上面我所放的例子，HTML有一个大体结构

<html>
    
    <head>
        
        <title>页面标题</title>
        
    </head>
    
    <body>
        
        <h1>这是一个标题</h1>
        
        <p>这是一个段落</p>
        
        <h3>这还是一个标题，只不过比h1小</h3>
        
        <p>段落</p>
        
    </body>
</html>

注意！head的内容没有出现，为什么？其实只有body的内容才出现了，而head是页面的标题，在web中并未出现

这里面还出现了个图片，还有句**< img src = “electrojay.jpg” >**,这个是什么意思？其实这个是图像的标签，后面就学到它，感兴趣可以提前去学习一下

里面还有个< em >，又是啥？对比一下就可知，它是斜体标签，记得不要忘记后面的结束标签兄弟

HTML版本

目前最新版本也就是XHTML5，主要用的是HTML5

而HTML5需要有一个声明（~~也就是避免一些浏览器不知道你这是哪个版本~~）

<!DOCTYPE html>
<!-- 注意，前面的DOCTYPE不区分大小写，这个是HTML5的声明，其他版本不过多叙述 -->

中文编码问题

中文乱码，太正常了，但是我们要怎么解决这个问题呢，很简单，在< head >里面声明UTF-8 或 GBK即可

<!DOCTYPE html>
<html>
    
    <head>
        
        <meta charset="UTF-8">
        
        <title>页面标题</title>
        
    </head>
    
    <body>
        
        <h1>这是一个标题</h1>
        
        <p>这是一个段落</p>
        
        <h3>这还是一个标题，只不过比h1小</h3>
        
        <p>段落</p>
        
    </body>
</html>

这里有一个需要注意的地方，也就是用了< meta charset=“UTF-8” >之后，网页出现乱码，其实就是文档编码跟meta所设置的编码不一样，所以要确保是一致的

以上就是HTML的基本内容

HTML 标题

在上面有个< h1 >和< h3 >，它们就是标题，1~6

HTML段落

也就是< p>啦

HTML 链接

< a>就是链接标签，它是用来连接其他的

<a href = "https://codeforces.com">这是一个链接</a>

HTML图像

< img >是定义图像的标签

<img src = "electrojay.jpg" alt="electrojay" width="304" height="304">
<!-- 后面的alt,width,height是关于图像的一些性质，后面将会深一步了解 -->

HTML元素

开始标签	元素内容	结束标签
< br/ >	换行	它比较特殊，没有结束标签
< p >	段落	< /p >
< a href=“default.htm” >	链接	< /a >

HTML元素语法

记得开始与结束加上标签就行，还有大多数 HTML 元素可拥有属性

嵌套的HTML元素

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）

HTML空元素

就是没有内容

注意！由于一些版本强制小写，所以统一使用小写

HTML属性

这个比较多，完整的HTML属性列表在这里

HTML 水平线

创建水平线(~~由于他会自己生成水平线，所以我将他注释掉~~)

HTML注释

这里面的就是注释标签

注意！当你想查看网站源代码时，可以单击右键，点击”查看源代码“即可

HTML 折行

也就是< br >

类似于\n

它并没有结束标签

<p>这里<br>会换行<\p>

HTML并不会理会你有多少个空行，它只看标签

HTML格式化标签

上面有提到< em >是斜体，那么粗体呢，也就是< strong >,当然，也有简便的写法，如< i >,< b >，分别对应斜体，粗体，其他的格式化输出看这里

HTML链接

< a >来设置超文本链接

<!-- 接下来是它的使用语法 -->
<a href="url">链接文本</a>
<!-- href属性描述了目的 -->

链接 target属性

利用target我们可以定义在哪里显示，是重新开一个网页显示还是什么什么的

<a href="https://www.codeforces.com/" target="_blank" rel="noopener noreferrer">cf</a>

而id属性就是为HTML标记，方便别的HTML方便引用

HTML < head >元素

< head > 元素包含了所有的头部标签元素。在 < head >元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: < title >, < style >, < meta >, < link >, < script >, < noscript > 和 < base >。

HTML< title > 元素

定义文档的标题

当然，它还可以在左侧显示logo等图片

显示时，要将< link >放入< head >里面

HTML < base >元素

< base > 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

例如下面的例子

<head>
<base href="http://www.runoob.com/images/" target="_blank">	
</head>

HTML< link >元素

< link> 标签定义了文档与外部资源之间的关系。

< link> 标签通常用于链接到样式表。如下

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML< style >元素

正如style这个单词，它使用来定义我们网页的外观，渲染我们的网页，如下

<html>
    <head>
        <title>Starbuzz Coffee</title>
        <style type="text/css">
            body {
                background-color: #d2b48c;
                margin-left: 20%;
                margin-right: 20%;
                border: 2px dotted black;
                padding: 10px 10px 10px 10px;
                font-family: sans-serif;
            }
            /* 这里使用的是css，与html的语法完全不同 */
        </style>
    </head>

    <body>
        <h1>
            Starbuzz Coffee Beverages
        </h1>
    
        <h2>
            House Blend, $1.49
        </h2>
        <p>
            A smooth, mild blend of coffees from
            Mexico, Bolivia and Guatemala.
        </p>
    
        <h2>
            Mocha Cafe Latte, $2.35
        </h2>
        <p>
            Espresso, steamed milk and chocolate
            syrup.
        </p>
    
        <h2>
            Cappuccino, $1.89
        </h2>
        <p>
            A mixture of espresso, steamed milk
            and foam.
        </p>

        <h2>
            Chai Tea, $1.85
        </h2>
        <p>
            A spicy drink made with black tea,
            spices, milk and honey.
        </p>

        <!-- <p id="houseblend">A smooth, mild
            blend of coffees from Mexico, Bolivia
            and Guatemale.
        </p> -->
    </body>
</html>

渲染出来就是如下的图片

在这里插入图片描述

字的摆放位置和背景颜色均有改变

HTML< meta >元素

meta标签描述了一些基本的元数据。

< meta > 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

< meta > 一般放置于 < head > 区域

HTML< script >元素

加载脚本文件，如js，后面再详细叙述

以上就是HTML基础知识的内容,若有错误的地方，望指正，谢谢

Electrojay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
HTML 第一周

可以添加在头部区域的元素标签为: < title >, < style >, < meta >, < link >, < script >, < noscript > 和 < base >。上面有提到< em >是斜体，那么粗体呢，也就是< strong >,当然，也有简便的写法，如< i >,< b >，分别对应斜体，粗体，其他的格式化输出看。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。标签是成对出现的，比如< html >和< /html >
复制链接

扫一扫