首页 > 其他分享> 文章详细

跟着pink老师学前端HTML-D1

2021-06-12 16:02:16 阅读：181 来源： 互联网

标签：pink 推出 12 标签单曲 HTML 链接 D1

0. web标准的构成

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

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

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

1. HTML语法规范

1. 基本语法

标签在尖括号里面
标签总是成对出现，叫双标签
极少数为单标签<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的使用

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

2. VsCode安装插件

Chinese language pack for VS Code：中文简体语言包
Open in Browser
Auto Rename Tag：自动重命名配对的HTML/XML标签
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>

文档类型声明，告诉浏览器用哪种html版本显示网页。

<!DOCTYPE html>
//不属于html标签
//必须写在第一行

lang语言种类

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

字符集，规定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>

div是division的缩写，表示分割、分区。单独占一行，大盒子，块级标签。
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. 路径

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

1）同一级路径
```
<img src="kitty.jpg" />
```
1. 下一级路径：
```
<img src="images/kitty.jpg" />
```
3）上一级路径：
```
<img src="../kitty.jpg" />
```

绝对路径

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

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

6. 超链接标签

外部链接

<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会打开新窗口跳转链接

内部链接

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

空链接

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

下载链接

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

网页元素链接

<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>

锚点链接

<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

标签：pink,推出,12,标签,单曲,HTML,链接,D1
来源： https://blog.csdn.net/weixin_46548238/article/details/117849040

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

ICode9