HTML入门学习笔记

HTML的由来

HTML是由Web的发明者 Tim Berners-Lee(李爵士)和同事 Daniel W. Connolly于1990年创立的一种标记语言

HTML起手式

在编辑器中新建一个 HTML 文件,然后输入 ! 并按下键盘左上角的 Tab 键,就可以快速生成一个HTML网页的框架。

HTML的章节标签

    h1~h6

    <h1>–<h6> 标题(Heading)元素呈现了六个不同的级别的标题,<h1> 级别最高,而 <h6> 级别最低

几个标签的效果如图所示

section

<section>元素表示一个包含在HTML文档中的独立部分,它没有更具体的语义元素来表示,一般来说会有包含一个标题。


section的使用介绍

   arcicle

<article>元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目.

article 这个组件的功能感觉和section 有些类似,都是表示一个独立的整体。

main

<main>  </main> 标签的作用主要就是用来包裹主要内容。

aside

<aside></aside>标签和main 标签不同,它是用来包裹次要内容的。


main和aside 标签的使用

全局属性

Q:什么是全局属性?

A:就是所有标签都具有的属性。

常见的全局属性有:


全局属性

 class 

class的值是一个以空格分隔的元素的类名。


class的使用方法

Q:我们可以用这个类名来做什么呢?

A:我们可以用这个类名在style里面来设置标签的样式。

在设置属性样式的时候,有这样的两种形式,

第一种:


不过这种方法有个缺点就是,如果一个标签的类名有很多个的话,这种方法就不起作用了。


所以如果你想用 [class=??] 这样的形式来设置标签样式的话,你只能把这个标签所有的类名都写上才能生效。


第二种:

Q:经过上面的情况,肯定有人会问,这也太坑了吧,如果每次都要把类名全写上也太累了。

A:不急,我们还有第二种设置的方法。


.+类名的设置方法

所以,要使用哪一个,就看各位的实际情况来决定了。

contenteditable

这个属性的作用就是使任何一个元素在网页上可以被编辑。


当然这种网页上的修改是不会替换掉我们代码里写的内容的。

只不过我们有时候如果想直接在网页上进行微调,来看下效果有什么不同的话,这个属性是一个比较方便的方法。

hidden

这个属性的作用跟它的名字一样,就是能够让一个元素隐藏。

id

 emmm, id 的作用,感觉和class 类似,

传言,id能够用来唯一标识一个元素,但是。

所以,传言应该不是真的

id在JS中的使用:


注意:像这样的写法,有些单词是不能用的。

比如你把id 设置成parent,top或者self 就无法通过 xxx.style.border 这样的形式来设置属性样式。


Q:这是为什么呢?


A:你可以到控制台,输入window. 然后它就会有一个弹出框,弹出框里面就是window已经有的全局属性

因为你不可能用一个标签把window的全局属性给覆盖掉


style属性:



总结:样式优先级:JS设置的样式>style属性> CSS

tabindex属性:

键盘上左上角有一个 Tab 键,页面上 所有的可交互的东西,都可以用Tab来访问到。

Q:为什么要这样做呢?

A:因为你保不准有的人没有鼠标,或者鼠标正好坏了,那在这种情况下,就需要用到Tab键来选择要交互的对象。




常用的内容标签


ol+li&ul+li


dl



dd和dt的全称

pre

在HTML中,空格,回车换行符或者Tab都会被缩成一个空格。

Q:那我就是想让我输入的空格,或者换行,Tab 显示出来怎么办?

A:我就需要借助pre 标签。



code

HTML <code> 元素呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示.

code标签的使用


hr

hr (Horizontal Rule)就是一个分隔符


br



a

HTML <a> 元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。


a标签的使用方法

Q:如果我当前打开的网页没有设置 target='_blank',我要怎么实现在新标签页打开这个网址?

A:使用鼠标中键点击就能实现

em&strong



quote&blockquote

这两个标签代表其中的文字是引用内容


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 5,125评论 0 0
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,510评论 0 7
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,587评论 1 41
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,327评论 0 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,981评论 0 3

友情链接更多精彩内容