HTML笔记

163 阅读3分钟

《HTML入门笔记》

一、HTML是谁发明的

HTML的英文全称是Hyper Text Marked Language,是由www(world Wilde web)的发明者Tim Berners Lee(简称李爵士)于1990年创立的一个种标记语言。

二、HTML起手应该怎么写

下面是一个初始的html框架,其中:

  • <!DOCTYPE html> :文档类型,告诉浏览器用html的格式来解析
  • <html lang="zh-CN">:html的标签,表示这个网站是中文的
  • <head></head> 网站的头部,都是隐藏的属性
  • <meta charset="UTF-8">文件的字符编码
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">告诉IE使用最新的内核
  • <meta name="viewport" content="width=device-width, initial-scale=1.0", maximum-scale=1> 告诉浏览器适应设备宽度,禁用缩放,兼容手机
  • <title>Document</title>网站的表题
  • <body></body>可以理解网站的主体,所有的内容都在里面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

三、常用的表章节标签

ps:HTML 语义化就是使用正确的标签(总结)段落就写 p 标签,标题就写 h1 标签,文章就写article标签,视频就写video标签,等等

  • <h1></h1>文章的标题,一级标题,h1 ~ h6一次类推
  • <section></section>章节,
  • <article></article>文章,一个网站中可能包含多篇文章
  • <p></p>段落
  • <header></header>头部
  • <footer></footer>脚部
  • <main></main>主要内容
  • <aside></aside>旁支
  • <div></div>划分

四、全局属性有哪些

  • class 标签的类别,相当于给标签取一个名字
  • contenteditable表示这个标签里面的内容可以修改
  • hidden将标签设置为隐藏
  • id也相当于标签的名字,一般不用,使用js的时候,如果id的内容于系统的一些全局变量名一样会导致获取不到id
  • style标签的样式,如果一个标签在css、标签的属性里面和js中同时编辑了,他们调用的优先级是js>标签内>css
  • tabindex在不使用鼠标的前提,通过键盘上的按键实现所选内容的切换,用数字来设置切换的优先级,其中:-1表示不被选择,0表示最后才选择
  • title 当一个标签的内容过长时,在网页上超出页面部分用省略号表示,设置好这个标签后,当鼠标移动到这个省略的内容上时,会显示title里面的所有内容

五、常用的内容标签

  • ol+li(ordered list + list item)有序列表
  • ul+li(unordered list + list item)无序列表
  • dl+dt+dd(description list+term+data)dd里面对dt里面的内容进行说明
  • prepreview的缩写,pre会保留所有的内容,包括空格,回车、tab。。。
  • hr分割线
  • br换行
  • a链接标签
  • em标记出需要用户着重阅读的内容
  • strong表示文本十分重要,一般用粗体显示
  • code呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示.
  • q表示一个封闭的并且是短的行内引用的文本. 这个标签是用来引用短的文本
  • blockquote代表其中的文字是引用内容。通常在渲染时,这部分的内容会有一定的缩进