前端学习笔记--HTML5

135 阅读2分钟

HTML起源:

HTML的英文全称是 Hypertext Marked Language,即超文本标记语言。是由Web的发明者 Tim Berners-Lee发明的

可以在谷歌 MDN HTML5中查询到HTML5的权威资料

HTML 起手式

HTML常用的章节标签

  • 标题 h1~h6 表示标题 有默认样式加大加粗
  • 章节 section  
  • 文章 article
  • 段落 p   表示段落
  • 头部 header  表示文章的顶部
  • 脚部 footer  表示文章脚部 一般放版权声明
  • 主要内容 main  表示文章那些内容是主要的
  • 旁支内容 aside  文章的旁支内容,可以写导航
  • 划分 div  划分那些内容是一个整体

HTML中全局属性(所有标签都有的属性)

  • class  在一些元素中使用,方便统一设置属性 (如果class=“xxx xxx”可在style中用.xxx{} .xxx{}设置属性)
  • contenteditable   可让用户在页面中更改
  • hidden  隐藏
  • id  和class差不多能用class就用class,不到万不得已不用id(id=“xxx”)
  • style   (在js中优先级最高 用于写样式)(style=“xxx”)
  • tablndex (用于没有鼠标的用户用Tab时的定位 1最先访问 0最后访问-1永不到这)(tablndex=x)
  • title (当用户看不全写提示 不换行css添加三行就行  white-space:nowrap(不换行);  text-overflos:ellipsos;(文字出去了显示省略号)  overflow:hidden(溢出就省略))(title=“要提示的内容”)

去除HTML的默认样式

因为默认的样式已经不能满足现在前端的需求,我们要自己根据业务需求去定制样式

<style>
* { 
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; 
}
</style>

HTML内容标签

  • ol+li (有序列表)
  • ul+li (无序列表)
  • dl+dt+dd (自定义列表)
  • pre (格式化输出所写既所得)
  • hr (分割线)
  • br (换行)
  • a (超链接)(a href="" target="_blank")
  • em (强调 斜体)
  • strong (加粗)
  • code (全等宽字体 一般用来写代码)
  • quote (引用)
  • blockquote (块级引用)