HTML入门笔记1

153 阅读3分钟

HTML的历史:

HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言。

HTML的起手式:

代码解释:

    :表示文档类型    :表示html标签,lang初始是''en'',需要修改成zh-CN

<meta charset=''UTF-8''/>   :表示文件的字符编码,统一使用UTF-8

<meta name=''viewport'' content=''width=device-width,initial-scale=1.0/>   :表示防止页面缩放,当作必须要写上的一句话

**<meta http-equiv=''X-UA-Compatible'' content=''ie-dege''/>  :表示如果当前页面在ie浏览器运行,请把ie浏览器升级成最新内核

Document  :表示网页的标题

章节标签:

  • 标题h1~h6: 可以写文章标题,自动加黑加粗。效果如: 

  • section表示开始一个新的大章节(可以在section中套section),p标签表示一段话: 效果如:

  • header表示顶部标签  :

  • footer表示底部标签:      

  • main表示主要内容,保住中间的主要的内容

  • aside表示不是主要内容的东西,是旁支内容

div用作简单的划分,表示

包裹的内容是一个整体

全局属性(任何标签都可以拥有的属性):

  • class:给标签分一个类(class可以添加多个),但是class有一个问题,举例:在<head中定义style,使用的方法是[class=middle]和[class=bordered]时,<div class=""middle bordered"">,就无法生效,需要按照下面的方法来定义:.middle{}的定义方式:

  • contenteditable,可供用户编辑自己的页面:

  • 当style放在body中,并且加入style{dispaly:block},可以让style在网页中可以看见,当在style中添加contenteditable,即可让用户编辑页面样式

  • hidden可以让标签看不见,但是可以用css中的dispaly:block让标签显示回来

  • id不到万不得已不要用id,因为id不能保证它是全局唯一的,当有两个id相同时,程序不会报错(如果用id,id的样式的简写方式#加id名字),id可以在js中引用,

  • style:可以中标签中如

    中写style=“background:red”,style是HTML的属性,不是css,而且它的执行级别比id的样式要高。js的比HTML的级别更高。会覆盖HTML的值

  • tabindex:tabindex=1表示按tab最先到达的地方,tabindex=0表示按tab最后到达,tabindex=-1,表示不来到这个地方

  • title标签:用来显示完整的内容,使用方法是title=“添加的内容”,再配合下面的代码使用。

CSS将来的笔记:

默认样式:

默认样式已经不能满足现在的前端开发需求,因此需要css reset

css reset的一些设置(参考),分为清除原有样式,和业务样式

内容标签:

  • ol+li(ol表示有顺序的列表,里面是li,li表示列表中的一项)
  • ul+li(ul表示无顺序列表)
  • dl+dt+dd(描述列表)

  • pre:可以让html保留空格,回车
  • code:code包裹的内容是等宽的,可以写在里面写代码,可以用pre包住code。
  • hr:水平分割线
  • br:换行
  • a:可以写href,添加可点击的连接,里面可以写target="_blank"网页在新标签打开
  • em:强调被包裹的内容,可以修改默认样式
  • strong:重要,也是强调被包裹内容,可以修改默认样式
  • quote:引用效果
  • blockquote:可以换行的引用