首页 > 其他分享> > HTML（day1）

HTML（day1）

2022-01-17 17:32:21 作者：互联网

语法规范

基本结构标签

开发工具

1）！+enter : 快速生称html代码框架

2） shift+alt+向下的方向键：向下复制当前行

3） shift+alt+向上的方向键：向上复制当前行

4） ctrl+S：保存

5）shift+alt+F: 格式化代码

6） ctrl+F: 查找和替换

vscode插件使用

DOCTYPE和lang的作用

HTML常用标签

标题标签

换行标签和段落标签

课堂案例

<!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>Document</title>
</head>
<body>
    <h1>林书豪20+6+6吉布森28分 北京轻取山西夺3连胜</h1>
    <h4>2022月1月16日，2021-2022赛季第二阶段第23轮继续较量，北京以115-90击败山西。北京夺3连胜，山西两连败。</h4>
    <p>山西4人得分上双，费尔德14分6助，葛昭宝10分5板，闫鹏飞17分12板，西蒙斯24分9板5助。北京4人得分上双，李慕豪15分3板，范子铭16分11板4助，林书豪20分6板6助3断，吉布森28分3板。</p>
    <h4>首节一开场，双方就战成6平，9平。</h4>
    <p>易边再战。北京一开场内线连续得分，将优势扩大到20分以上。林书豪连续飙中两记外线3分，刘晓宇再添3分，北京将领先优势一度扩大到30分。第三节战罢，北京92-64领先28分。末节，北京开场就打出11-4小高潮，得分率先过百，并扩大优势到35分。最终，北京以115-90击败山西。</p>
    <p>作者<br />2022/1/16</p>
</body>
</html>

文本格式化标签

<!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>Document</title>
</head>
<body>
    我是加粗的文字
    我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字
    我是<del>加删除线</del>的文字
    我是<s>加删除线</s>的文字
    我是<ins>加下划线</ins>的文字
    我是<u>加下划线</u>的文字

</body>
</html>

div和span标签

<body>
    <div>我是一个div盒子</div>
    <div>我是一个div盒子</div>
    <span>我是span1</span>
    <span>我是span2 </span>
</body>

图像标签

<body>
    <h4>图像标签的使用</h4>
    <img src="123.jpg" />
</body>

<body>
    <h4>图像标签的使用</h4>
    <img src="123.jpg" />
    <h4>我是替换文本的使用：</h4>
    <img src="1231.jpg" alt="这是twy的照片"/>
</body>

<body>
    <h4>图像标签的使用</h4>
    <img src="123.jpg" />
    <h4>我是替换文本的使用：</h4>
    <img src="1231.jpg" alt="这是twy的照片"/>
    <h4>提示文本 鼠标放到图像上会有文字提示</h4>
    <img src="123.jpg" title="这是twy的照片"/>
    <h4>width 给宽度修改</h4>
    <img src="123.jpg" alt="这是twy的照片" width="500"/>
    <h4>heigth 修改高度</h4>
    <img src="123.jpg" alt="这是twy的照片" height="500"/>
    <h4>border 加边框</h4>
    <img src="123.jpg" alt="这是twy的照片" height="500" border="15"/>
</body>

src是必须的

路径

<body>
    <img src="D:\桌面\HTML第一天\案例/123.jpg" />
    <img src="https://mp-blog.csdn.net/mp_blog/img/quanjian.e904bca6.png" />
</body>

超链接标签

<body>
    <h4>外部链接</h4>
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    target 链接打开方式 默认是 _self在当前页面打开  _blank在新的窗口打开
    <h4>内部链接 打开网站内部页面之间的相互链接</h4>
    <a href="06-课堂案例.html" target="_blank">内部链接</a>
    <h4>空链接：#</h4>
    <a href="#">空链接</a>
    <h4>下载链接</h4>
    <a href="123.zip">下载链接</a>
    <h4>网页元素的链接</h4>
    <a href="http://www.baidu.com" target="_blank"><img src="123.jpg" /></a>
</body>

锚点链接

html的注释和特殊字符

注释

综合案例

圣诞树

标签：文字,得分,标签,北京,day1,HTML,图像,链接
来源： https://blog.csdn.net/weixin_61226216/article/details/122529799