前端----5分钟学会html

😊 什么是html;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
hello world 
</body>
</html>

这就是一个简单的hello world
我们通常使用chrome这个浏览器进行测试
软件可以选择vscode,如果需要安装包可以后台私信我。
在 IDEA 中创建文件 xxx.html, 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架.

😂基础功能

<body> hello  </body> 
  • 标签名 (body) 放到 < > 中大部分标签成对出现.
  • 为开始标签, 为结束标签.
  • 少数标签只有开始标签, 称为 “单标签”.
  • 开始标签和结束标签之间, 写的是标签的内容.
  • (hello)开始标签中可能会带有
    “属性”. id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).

注释标签

  <!-- 我是注释 -->
  • ctrl + / 快捷键可以快速进行注释/取消注释.

标题标签

 <h1>hello</h1>
 <h2>hello</h2>
 <h3>hello</h3>
 <h4>hello</h4>
 <h5>hello</h5>
 <h6>hello</h6>
  • 有六个, 从 h1 - h6. 数字越大, 则字体越小.

段落标签

 <p>这是一个段落</p>
  •  <p>这是一个段落</p> 这是段落标签
    
  • 换行标签: br
  • br 是 break 的缩写. 表示换行.
 <strong>strong 加粗</strong>
 <b>b 加粗</b><em>倾斜</em>
 <i>倾斜</i><del>删除线</del>
 <s>删除线</s>
 <ins>下划线</ins
 ><u>下划线</u>

其他标签

  • 加粗: strong 标签 和 b 标签倾斜:
  • List item
  • em 标签 和 i 标签删除线:
  • del 标签 和 s 标签下划线:
  • ins 标签 和 u 标签

超链接标签与图片标签:

 <a href="http://www.baidu.com">百度</a>
 <a href="http://www.baidu.com"target="_blank">百度</a>
  • 一个是直接打开百度
  • 下面是用空白页打开百度
    <img src="rose.jpg">

例如

<.img src=“rose.jpg” alt=“鲜花” title=“这是一朵鲜花” width=“500px” height=“800px” border=“5px”>

  • `alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字. title: 提示文本. 鼠标放到图片上, 就会有提示.
  • width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
  • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定

🤣 小练习

利用上述的操作去写一个网页关于介绍自己的简历

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卷的快乐人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值