前端学习之 HTML5+CSS3基础

Adobee Chen

已于 2022-03-20 22:50:57 修改

阅读量325

点赞数

分类专栏：前端学习文章标签：前端 html5 学习

于 2022-02-25 15:09:34 首次发布

本文链接：https://blog.csdn.net/qq_24186017/article/details/123127723

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML5

1.自结束标签和注释

<html>

    <head>
     <title>这是我的第一个网页</title>
    </head>
    <body>
     <h1>这是我的第一个网页</h1>

     <!--自结束标签-->
     <img>
     <img />
     <input>
     <input /> 

    </body>

</html>

2.标签的属性

<html>

    <head>
     <title>这是我的第一个网页</title>
    </head>
    <body>
     <!--
          属性：在开始标签和自结束标签，属性是一个名值对
      -->
     <h1>这是我的<font color="red">第一个</font>网页</h1>

    </body>

</html>

3.实体

<!DOCTYPE html>
<html lang="en">
 <head>
     <meta name="keywords" content="HTML,前端,css" charset="UTF-8">
     <title>实体</title>
 </head>
 <body>
     <!--
       实体的语法:
          &实体的名字;
          &nbsp; 空格
          &gt;大于号
          &lt;小于号
          &copy; 版权符号

     -->
     <p>
         今天&nbsp;
     </p>

 </body>
</html>

4.meta标签

<!DOCTYPE html>
<html lang="en">
 <head>
     <!--
         meta主要用于设置网页中的一些元数据，元数据不是给用户看
         charset 指定网页的字符集
         name 指定的数据的名称
         content 指定的数据的内容

         keywords:搜索关键字
         description:连接下面的描述
         title:链接url上显示的

     -->
     <meta name="keywords" content="HTML,前端,css" charset="UTF-8">
     <title>meta</title>
 </head>
 <body>

 </body>
</html>

5.语义化标签

<!DOCTYPE html>
<html lang="en">
 <head>
    
     <meta name="keywords" content="HTML,前端,css" charset="UTF-8">
     <title>语义化标签</title>
 </head>
 <body>

     <!--
        1.段落标签
     -->
     <p>
         今天&nbsp;
     </p>

     <!--
        2.一般情况下，一个网站只有一个h1
        独占一行的是块元素
     -->
     <h1>一级标题</h1>
     <h2>二级标题</h2>
     <h3>三级标题</h3>

     <!--
        3.em标签用于表示语音语调的一个加重
        不会独占一行的元素称为行内元素
     -->
    
     <p>今天天气<em>真</em>不错</p>

     <!--
         4.strong 重要
     -->
     <p>你今天必须要<strong>完成作业</strong></p>


     <!--
         5.blockquote: 引用
     -->
     鲁迅说:
     <blockquote>
         这句话我从来没说过的
     </blockquote>


     <!--
      6.q表示引用

     -->
     子曰<q>学而时习之</q>
    
    <!--
       7. br 换行
    --> 
  
     <br>

     今天天气真不错

 </body>
</html>

块元素（block element）在网页中一般通过块元素来对页面进行布局

行内元素( inline element) 行内元素主要用来包裹文字、一般情况下在块元素中放行内元素，而不会在行内元素中放块元素，块元素基本上什么都能放

p元素中不能放任何的块元素

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正

6.布局标签

Adobee Chen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习之 HTML5+CSS3基础

目录HTML51.自结束标签和注释2.标签的属性3.实体4.meta标签5.语义化标签6.布局标签HTML51.自结束标签和注释<html> <head> <title>这是我的第一个网页</title> </head> <body> <h1>这是我的第一个网页</h1> <!--自结束标签--&gt..
复制链接

扫一扫