day002——HTML初接触

最新推荐文章于 2024-11-03 20:03:09 发布

王总总

最新推荐文章于 2024-11-03 20:03:09 发布

阅读量111

点赞数

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

本文链接：https://blog.csdn.net/Teeeeesting/article/details/109741688

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.标签属性：属性名=属性值，起到附加说明补充要求的作用。不是所有标签都有属性，比如br标签。

2.单标签：换行<br/>、水平线<hr/>、图片标签<img/>、文本<input/>、link标签<link/>、元信息标签<meta/>。

3.文本格式化标签：就是通过标签来美化文本外观

b和strong：都有加粗作用，但strong除了加粗还有强调作用。注：强调主要用于SEO（搜索引擎优化）时，便于提取对应关键字
i和em：使文字倾斜，em具有强调作用。如果只是简单的倾斜效果，用i标签就可以，比如添加图标等
pre：预格式化文本，保留换行和空格及宽度。（块级标签，在浏览器中独占一行，可设置行高）
small和big：文字缩小和放大。big在html5中被淘汰了，但没有删除。（行级标签，不会独占一行，不识别行高）（浏览器最小支持字号为12px字，如果要显示比12还小的文字效果，需要做处理）
sub和sup：设置文本为下标和上标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本格式化标签</title>
    <!--就是通过标签来美化文本外观-->
</head>
<body>
    <!--b和strong：都有加粗作用，但strong除了加粗还有强调作用。注：强调主要用于SEO（搜索引擎优化）时，便于提取对应关键字-->
    <b>加粗</b>
    <strong>加粗且强调</strong>

    <!--i和em：使文字倾斜，em具有强调作用。如果只是简单的倾斜效果，用i标签就可以，比如添加图标等-->
    <i>文字倾斜</i>
    <em>文字倾斜且强调</em>

    <!--pre：预格式化文本，保留换行和空格及宽度-->
    <pre>预格式化问   保留
    空格
       换行
发</pre>

    <!--small和big：文字缩小和放大。big在html5中被淘汰了，但没有删除-->
    <small>小的</small>
    <p>正常</p>
    <big>大的</big>

    <!--sub和sup：设置文本为下标和上标,用来调整文本正常显示的基线，且文字会自动小一号-->
    <p>勾股定理：a2+b2=c2</p>
    <p>勾股定理：a<sub>2</sub>+b<sub>2</sub>=c<sub>2</sub></p>
    <p>勾股定理：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>


</body>
</html>

1.实体转义符：&nbsp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实体转义符</title>
</head>
<body>
    <p>         啊      哦    </p>
    <p>         啊&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;哦    </p>

</body>
</html>

2.块级元素：独占一行，宽度和高度可控，如果没有设置其宽度，将默认充满整行；其内可包含块级和行级元素

行级元素：不会独占一行，与相邻行级元素占同一行，直到行占满，会自动掉到下一行；宽度高度不可控；其内只有包含行级元素。

互转方法：块——》行 display:inline 块——》行 display:block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级元素和行级元素</title>
</head>
<body>
    <div>
        div
    </div>
    <!--块级标签-->
    <p style="width:300px;height: 60px;background: green">p</p>
    <strong>strong</strong>
    <!--行级标签-->
    <span style="width:300px;height: 60px;background: yellow">span</span>

    <br>
<!--标签互转-->
    <p style="width:300px;height: 60px;background: green;display:inline" >p</p>
    <strong>strong</strong>
    <!--行级标签-->
    <span style="width:300px;height: 60px;background: yellow;display:block">span</span>
</body>
</html>

1.w3c标准：由结构（HTML）、表现（CSS）、和行为（JavaScript）三部分组成
常见规范：

1）定义语言编码、

2.文件/目录名要求：不能出现汉字、空格之类的其他符号，一般以字母和下划线开头，其后可以出现字母、数字和下划线等

文件名：index.html（首页） order.html（订单页）等

总结：

HTML是一种超文本标记语言，他不属于编程语言。
HTML5是2014年后推出的，是公认的下一代web语言，是重要的网络推手。
HTML具有简易性、可拓展性、平台无关性和通用性等特点。
网页分为静态和动态两种。动态和后台有关联。
五大主流浏览器：IE（edge）、Firefox、Chrome、Safari、Opera
浏览器内核由渲染引擎和JS引擎两部分组成。内核：Trident（IE）、Gecko（Firefox）、Webkit（Safari/Chrome）、Blink（Chrome/Opera）。国内浏览器大都采用双核驱动（T&W 或者T&B）。移动端：ip和ipad采用W，Android4.4以下W，以上B。
常用的专业开发工具：sublime、HBuilder、VScode、webstorm

一个网页页面的基本组成：

<html>
    <head></head>
    <body></body>
</html>


<!doctype html>
<html>
    <head>
        <!--head中常见内容-->
        <meta http-equiv="content-type" content="test/html" charset="UTF-8"/>
        <meta name="keyword" content="..."/>
        <meta name="description" content="..."/>
        <link rel="shortcut icon" href="图标路径+文件名" type="image/x-icon"/>
        <title>...</title>
        <link rel="stylesheet" href="外部样式文件"/>
        <style type="text/css">
            样式设置
        </style>
    </head>

    <body>
        网页主体内容
        <p>。。。。。。。。。</p>

    </body>
    <script language="JavaScript" type="text/javascript">
        脚本代码
    </script>
</html>

标签分块级和行级（内联）两种。
块级独占一行，识别宽高，如果不设置，宽度为整行宽度，高度为内容实际的高度。可以通过设置样式转换为行级：display：inline；
行级不独占一行，不能设置宽高，宽高分别为内容实际的宽高。可以通过设置样式转换为块级：display：block；
块级标签：div、p、h1-h6、ul、ol、pre、table、address等
行级标签：span、a、b、strong、i、em、sup、sub等（img属于行级块标签，相当于执行了display：inline-block;操作）
w3c中的嵌套规范：
1）块级元素可以包含行级、块级，但行级元素只能包含行级元素。
2）p，h1-h6，dt元素中只能包含行级元素，不能再包含块级元素。
3）块级元素与块级元素并列，行级与行级并列。
在开发过程中，尽量使用语义化标签。

练习：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>雨巷</title>
    <link rel="shortcut icon" href="https://www.sf-express.com/resource/images/index/sf.png" type="image/x-icon">
</head>
<body content="center">
    <h1><a href="https://www.baidu.com/" target="_blank">雨巷</a></h1>
    <p>撑着油纸伞，独自彷徨在悠长，悠长又寂寥的雨巷，</p>
    <p>我希望逢着一个丁香一样的结着愁怨的姑娘。</p>
    <p>她是有丁香一样的颜色，丁香一样的芬芳，</p>
    <p>丁香一样的忧愁，在雨中哀怨，哀怨又彷徨；</p>
    <p>她彷徨在这寂寥的雨巷，撑着油纸伞像我一样，</p>
    <p>像我一样地默默彳亍着，冷漠，凄清，又惆怅。</p>
    <p>她静默地走近走近，又投出</p>
    <p>太息一般的眼光，她飘过像梦一般的，</p>
    <p>像梦一般的凄婉迷茫。像梦中飘过一枝丁香的，</p>
    <p>我身旁飘过这女郎；她静默地远了，远了，</p>
    <a href="https://www.baidu.com/" title="跳转百度"><img src="./img/test.jpg" alt="雨巷"></a>
    <p>到了颓圮的篱墙，走尽这雨巷。</p>
    <p>在雨的哀曲里，消了她的颜色，散了她的芬芳消散了，</p>
    <p>甚至她的太息般的眼光，丁香般的惆怅。</p>
    <p>撑着油纸伞，独自彷徨在悠长，悠长又寂寥的雨巷，</p>
    <p>我希望飘过一个丁香一样的结着愁怨的姑娘。</p>
</body>
</html>