😊 什么是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 来设定
🤣 小练习
利用上述的操作去写一个网页关于介绍自己的简历