【前端】html笔记-CSDN博客

本文链接：https://blog.csdn.net/QING_________/article/details/136008072

html

参考：【前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员】 https://www.bilibili.com/video/BV1kM4y127Li/?share_source=copy_web&vd_source=b4a9adec1e790e088162134b69d77d6c

html框架及各部分作用

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- head:给浏览器看的代码：css -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- title:网页名字 -->
</head>
<body>
  <!-- body:给用户看的东西：图片文字 -->
</body>
</html>

注释产生或删除(光标放到这一行的任意位置）：ctrl+/
保存：ctrl+s

标题标签

h1~h6
直接打h1,
<h1>一级标题</h1>
h1一般只用一次，放新闻标题/logo
h2~h6没有使用限制

段落标签

一段一用段落间
<p>hhhhhhhhhhhhhhhhhhhhhhhhh</p>

换行和水平线标签（单标签）

换行（浏览器不认enter键）多个换行间隔更大

第一行内容
  <br>
  第二行内容
  <br><br>
  第三行

水平线

第三行
  <hr>

文本格式化标签


  <!-- 在一行显示 -->
  <strong>加粗</strong>
  <em>倾斜</em>
  <ins>下划线</ins>
  <del>删除线</del>

图像标签

直接打img然后回车删掉alt用不上，src里输入./选择图片
多个属性用空格隔开
<img src="./11.png">

<img src="./11.png" alt="这是人物">
  <!-- alt的人物是当网速慢时显示不了图片显示文字 -->
  <img src="./11.png" title="提示信息">
  <img src="./11.png" width="100">
  <img src="./11.png" height="100">
  <!-- 宽度高度等比变化 -->
  <!-- 属性名="属性值" -->
 <img src="./11.png" alt="这是人物" title="这是说明" width="这是等比例变化的长和宽">
 <!-- 发现标签名和属性之间用空格隔开 不区分先后顺序 -->