跟着pink老师学前端HTML-D1

2024-03-21 14:51:16

0. web标准的构成

结构：用于对网页元素进行整理和分类（HTML）

表现：用于设置网页元素的版式、颜色、大小等外观样式（CSS）

行为：网页模型的定义及交互的编写（JavaScript）

1. HTML语法规范

1. 基本语法

  1. 标签在尖括号里面

  2. 标签总是成对出现，叫双标签

  3. 极少数为单标签<br \ >

2. 标签关系

<html>

	<head></head>

	<body></body>

</html>

包含关系

并列关系

2. HTML基本结构标签

<html></html>:html标签，根标签
<head></head>:文档的头部，在head标签中必须设置的标签时title
<title></title>:页面标题
<body></body>:文档的主体，页面内容基本都在body里面

<html>
    <head>
         <title>Title</title>
    </head>
    <body>
    </body>
</html>

3. 网页开发工具

1. VsCode的使用

  1. 保存（ctrl+s），要保存为.html文件
  2. ctrl+shift+x：下载插件
  3. 生成页面骨架结构：输入!按下tab键。
  4. Alt+B：浏览器打开（右键open in browser）。

2. VsCode安装插件

  1. Chinese language pack for VS Code：中文简体语言包
  2. Open in Browser
  3. Auto Rename Tag：自动重命名配对的HTML/XML标签
  4. CSS Peek：追踪至样式

3. VsCode工具生成骨架标签新增代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我用vscode创建的第一个页面</title>
</head>
<body>
    加油饱饱
</body>
</html>
  1. 文档类型声明，告诉浏览器用哪种html版本显示网页。
<!DOCTYPE html>
//不属于html标签
//必须写在第一行

  1. lang语言种类

    <html lang="en">
//en为英语，zh-CN为中文

  2. 字符集，规定HTML文档应使用哪种字符编码

    <meta charset="UTF-8">
//"UTF-8"为万国码，基本包含了全世界所有国家用到的字符。

4. HTML常用标签

1. 标题标签< h1>-< h6>

<body>
    <h1>标题标签</h1>
    <h1>标题一共六行选</h1>
    <h2>文字加粗一行显</h2>
    <h3>从小到大依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>
</body>

2. 段落< p>和换行标签< br />

<p>2021年6月9日23时40分许，我市二环路西一段发生一起故意伤害案，一女子下腹部受伤。<br />经工作，*机关于10日13时许将犯罪嫌疑人贺某某（男，43岁，陕西人，有盗窃、抢劫前科）抓获。经审查，贺某某对图财未果故意伤害他人的犯罪事实供认不讳。目前，受伤女子经医院救治，生命体征平稳。犯罪嫌疑人贺某某已被我局依法刑事拘留，案件正在进一步侦办中。
</p>
//<br />是个单标签，强制换行但没有分段。

3. 文本格式化标签

<body>
    我是<strong>加粗标签</strong> <br />
    我也是<b>加粗标签</b> <br />
    我是<em>倾斜标签</em> <br />
    我也是<i>倾斜标签</i> <br />
    我是<del>删除线</del> <br />
    我也是<s>删除线</s> <br />
    我是<ins>下划线</ins> <br />
    我也是<u>下划线</u> <br />
</body>

4. 盒子标签< div>< span>

  1. div是division的缩写，表示分割、分区。单独占一行，大盒子，块级标签。
  2. span意为跨度、跨距。一行可以有多个span标签，小盒子，行级标签。

5. 图像标签和路径

1. 图像标签

图像标签为单标签

<body>
    <h4>图片标签的使用</h4>
    <img src="kitty.jpg" />	//必写
    <h4>alt 替换文本，图像显示不出来的时候用文字替换</h4>
    <img src="kitty1.jpg" alt="Hello!riki!"/>
    <h4>title 提示文本，鼠标放到图像上用文字提示</h4>
    <img src="kitty.jpg" title="Hello!riki!"/>
    
    <h4>width 给图像设置宽度：</h4>
    <img src="kitty.jpg" width="300" title="Hello!riki!"/>
    <h4>height 给图像设置高度：</h4>
    <img src="kitty.jpg" height="300" title="Hello!riki!"/>

    <h4>border 给图像设置边框：</h4>
    <img src="kitty.jpg" title="Hello!riki!" width="300" border="15" />
</body>

2. 路径

  1. 相对路径：图片相对于HTML文件的位置

    1）同一级路径

    <img src="kitty.jpg" />
    1. 下一级路径：
    <img src="images/kitty.jpg" />

    3）上一级路径：

    <img src="../kitty.jpg" />

  2. 绝对路径

    <body>
    <img src="C:\Users\Pessimistic\Pictures\老婆\亲亲.png" width="500"/>

    <img src="https://wx3.sinaimg.cn/mw690/006SBzwCgy1gr6ha4aq6aj33k02o0b2b.jpg" />
</body>

6. 超链接标签

  1. 外部链接

    <h4>1.外部链接</h4>
<a href="https://weibo.com/6303673834/profile?rightmod=1&wvr=6&mod=personnumber&is_all=1#_rnd1623480704164" target="_blank">我的首页</a>
//target属性：默认的是_self当前窗口打开链接，_blank会打开新窗口跳转链接

  2. 内部链接

    <h4>2.内部链接：网站内部页面之间的相互链接</h4>
<a href="01-HTML.html">01-HTML</a>

  3. 空链接

    <h4>3.空链接：#</h4>
<a href="#">空链接</a>

  4. 下载链接

    <h4>4.下载链接：地址链接的是文件.exe或者是.zip等压缩包格式</h4>
<a href="kitty.zip">下载文件</a>

  5. 网页元素链接

    <h4>5.网页元素的链接</h4>
<a href="https://weibo.com/6303673834/profile?rightmod=1&wvr=6&mod=personnumber&is_all=1#_rnd1623480704164">
    <img src="kitty.jpg" height="300">
</a>

  6. 锚点链接

    <h2 id="return">目录</h2>
1.演艺经历<br />
<a href="#zyjm"> 2.综艺节目</a><br />
3.人物评价<br />

<h3>演艺经历</h3>
2017年7月26日推出首张专辑《2017》 [1] 
2018年7月15日，推出单曲《往上飙freestyle》 [7]  ；7月20日，推出个人单曲《敌人freestyle》 [8]  ；8月2日，推出个人单曲《匀升》 [9]  ；9月5日，推出个人单曲《网易云》 [6]  ；9月16日，推出单曲《举步维艰》 [10]  ；10月6日，发表diss曲《这首歌没唱直接听》 [11]  。2019年3月12日，推出单曲《不后悔遇见你》 [12]  ；4月12日，推出个人单曲《真没睡》 [13]  ；4月28日，推出与张雪飞、Lil.Fred合作单曲《围城》 [14]  ；5月21日，推出个人专辑《丙子》 [15]  ；7月16日，推出单曲《往右边划》。 [16] 2020年1月7日，推出个人专辑《初》 [3]  ；同年参加说唱节目《说唱新世代》 [4]  ；5月8日，推出个人单曲《宅》 [17]  ；12月9日，推出与阿达娃合作专辑《第九百步》先行曲《起点》 [5]  ；12月16日，在森马直播中与Doinb合唱单曲《火钳留名2021》 [18] 2021年1月1日，参加燥物MSN 音乐节演出； [19]  1月26日《吐槽大会》第五季官宣姜云升为首批阵容； [20]  1月31日，《吐槽大会》第五季在播出。<br />
<img src="https://img9.doubanio.com/view/group_topic/l/public/p355637924.webp" height="800">

<h3 id="zyjm">综艺节目</h3>
播出时间	节目名称	简介
2021-1	吐槽大会第五季	录制嘉宾[21] 
2020-8-22	说唱新世代	参加选手之一<br />
<img src="https://img2.doubanio.com/view/group_topic/l/public/p354438091.webp">
<a href="#return">返回顶部</a>

<h3>人物评价</h3>
音乐单曲
歌曲名称	发行时间	歌曲简介
宅[17] 	2020-5-8	当代迷惑说唱行为表演艺术家
往右边划	2019-7-16	怎么那么渣啊[16] 
围城[14] 	2019-4-28	天下只有两种人
真没睡[13] 	2019-4-12	献给每一个被女朋友误会的单纯男孩子，和我一样单纯的那种。

    目标设定id

    <h2 id="return">目录</h2>

    出发处设定超链接

    <a href="#return">返回顶部</a>

7. 注释标签和特殊字符

特殊字符 描述 代码
空格 &nbsp
< 小于号 &lt
> 大于号 &gt
上一篇：网络编程复习 D1章


下一篇：python基础课程讲解07.之基本数据类型2