HTML入门博客1

快樂小鬼吖
131 阅读1分钟

1.HTML 的历史

  • HTML于1991年诞生于李爵士的一篇文章HTML Tags

2.HTML 起手式

  • 首先写什么？
<!-- 文档类型 -->
<!DOCTYPE html>
<!-- html标签，可以把lang的属性值换成zh-CN -->
<html lang="en">

<head>
    <!-- 文件的字符编码 -->
    <meta charset="UTF-8">
    <!-- 告诉IE使用最新内核 -->
    <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>

</body>

</html>
  • 注意 微信图片_20220407160555.png ===>小圆点表示代码未保存，要常按ctrl+s

3.常用的表章节的标签

表义标签
标题h1~h6
章节section
文章article
段落p
头部header
脚部footer
主要内容main
旁支内容aside
划分div

4.全局属性：所有标签都有的属性

属性作用
class类
contenteditable可编辑的
hidden隐藏
id唯一标识
style样式
tabindex被tab访问的优先级，0表示最后访问，-1表示不可被访问
title标题（被隐藏的大段文字）

5.常用的内容标签

标签表义
ol+li有序列表
ul+li无序列表
dl+dt+dd描述性列表
pre保留空格
hr水平分割线
br换行
a链接
em表示语气上的强调
strong表示内容本身的重要性
code代码中的字母等宽
q引用
blockquote块级引用

6.一些默认设置

  • 文字溢出设置

white-space: nowrap;

text-overflow : ellipsis;

overflow :  hidden

  • 清除默认样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

  • 把table边线合起来

border-collapse: collapse;

border-spacing: 0;

  • 手机端禁止缩放

<meta name="viewport" content="width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
avatar
文章
阅读
粉丝