ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

黑马前端学习笔记|一、HTML标签 p0-p28

2022-03-20 16:31:40  阅读:143  来源: 互联网

标签:p0 标签 库里 助攻 HTML 文档 篮板 p28


目录

1 Web标准构成

2 HTML标签

2.1 标签书写规范

2.2 标签关系

2.3 基本结构标签(骨架标签) 

2.4 文档类型声明标签

2.5 lang语言种类

 2.6 字符集charset

3 HTML常用标签

3.1 标签语义

 3.2 标题标签

 3.3 段落和换行标签

3.3.1 段落标签

3.3.2 换行标签(单标签)

 3.4 文本格式化标签

3.5 - 3.6由于CSDN未及时保存丢失

3.7 超链接

3.7.1 链接分类


1 Web标准构成

Web标准提出的最佳体验方案:结构、样式、行为相分离;

即,结构写到HTML文件中,表现写到CSS文件中,行为写到JS文件中。

抽象图

2 HTML标签

2.1 标签书写规范

  • 标签书写在尖括号内且大部分成对出现 <html></html>
  • 有少量单标签,如 <br /> 标签与反斜杠之间习惯性加空格

2.2 标签关系

  • 包含关系
  • 并列关系

2.3 基本结构标签(骨架标签) 

  • 练习:
    <html>
    	<head>
    		<title>Hello World!</title>
    	</head>
    	<body>My first page!</body>
    </html>

2.4 文档类型声明标签

<!DOCTYPE>文档类型声明,作用是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>
# 当前页面采用HTML5版本来显示网页
  • <!DOCTYPE>声明位于文档最前面,处于<html>之前
  • <!DOCTYPE>不是一个HTML标签,它就是文档类型声明标签

2.5 lang语言种类

用来定义当前文档显示的语言。

  • en为英语,zh-CN为中文,fr为法语
  • 对文档来说,定义成en的文档也可以写其他语言
  • 这个属性对浏览器和搜索引擎起作用

设置成en与zh-CN显示区别如下:

<html lang="zh-CN">

<html lang="en">

 2.6 字符集charset

字符集是多个字符的集合,以便计算机能够识别和存储各种文字。

在<head>标签内,可以通过<meta>标签(单标签)的cahrset属性来规定文档应该用哪种字符编码。

<meta charset="UTF-8" />
  • 常用值:GB2312、BIG5、GBK和UTF-8;UTF-8也成为万国码,基本包含了全世界所有国家需要用到的字符。
  • 此行代码必须要写,负责可能引起乱码,一般用UTF-8.

3 HTML常用标签

3.1 标签语义

 3.2 标题标签

<h1>-<h6>共六个等级的标题标签,重要性逐渐递减。(双标签。)

  • 标题有自己的标题样式。加粗变大
  • 一个标题独占一行
    <h1>一级!</h1>
    <h2>二级!</h2>
    <h6>六级!</h6>

 3.3 段落和换行标签

3.3.1 段落标签

    <p>Stay hungry!</p>
    <p>Stay foolish!</p>

  •  文本会根据浏览器窗口大小自动换行
  • 段与段之间有空隙

3.3.2 换行标签(单标签)

    <p>Stay hungry!</p>
    <p>Stay foolish!</p>
    Stay hungry!<br>Stay foolish!

  •  文字页面模仿练习:
  •  文字素材:
  • 水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0
    数据统计:水花兄弟合砍61分
    库里22投11中,三分14投4中,罚球11罚全中得到37分8篮板8助攻,职业生涯季后赛得分30+次数来到35次,超过哈登排名现役第3位,仅次于詹姆斯和杜兰特。
    汤普森22投8中,三分8投4中得到24分3篮板2助攻,德拉蒙德-格林得到16分10篮板7助攻5盖帽,凯文-鲁尼得到14分7篮板2助攻,今天勇士有7名替补出场。
    兄弟对决升级:小库里给哥哥造成压力
    库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中,小库里没有给哥哥造成压力,他出场19分钟,7投1中只得到3分3篮板2助攻,在场期间输掉10分。
    但在西决第2场中,小库里攻防两端都打出杰出的表现,全场送出4次抢断,包括直接抢断自己的哥哥库里,在防守端给库里造成了极大的困扰。
    作者: pink老师
    2019-8-8
  • <body>
        <h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
        <h4>数据统计:水花兄弟合砍61分</h4>
        <p>库里22投11中,三分14投4中,罚球11罚全中得到37分8篮板8助攻,职业生涯季后赛得分30+次数来到35次,超过哈登排名现役第3位,仅次于詹姆斯和杜兰特。</p>
        <p>汤普森22投8中,三分8投4中得到24分3篮板2助攻,德拉蒙德-格林得到16分10篮板7助攻5盖帽,凯文-鲁尼得到14分7篮板2助攻,今天勇士有7名替补出场。</p>
        <h4>兄弟对决升级:小库里给哥哥造成压力</h4>
        <p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中,小库里没有给哥哥造成压力,他出场19分钟,7投1中只得到3分3篮板2助攻,在场期间输掉10分。</p>
        <p>但在西决第2场中,小库里攻防两端都打出杰出的表现,全场送出4次抢断,包括直接抢断自己的哥哥库里,在防守端给库里造成了极大的困扰。</p>
        <p>作者: pink老师<br>2019-8-8
        </p>
    </body>

     3.4 文本格式化标签

    我是<strong>加粗</strong><br> 
    我是<em>倾斜</em><br> 
    我是<del>删除线</del><br> 
    我是<ins>下划线</ins><br>

3.5 - 3.6由于CSDN未及时保存丢失

3.7 超链接

<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>

其中,href为必须属性。

3.7.1 链接分类

  •  锚点链接要注意超链接中属性前的#
    <a href="newPage.html" target="_blank">内部链接</a><br>
    <a href="http://www.baidu.com" target="_blank">百度 外部链接</a><br>
    <a href="#" target="_blank">空链接</a><br>
    <a href="img.zip" target="_blank">下载链接</a><br>
    <a href="http://www.baidu.com" target="_blank">元素链接<img src="img.jpg"></a>

 

 

 

 

 

 

标签:p0,标签,库里,助攻,HTML,文档,篮板,p28
来源: https://blog.csdn.net/qq_56349925/article/details/123358271

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有