写代码啦
HTML入门笔记(1)
回复数(0) 浏览数(11)
{{topic.upvote_count || 0}} 编辑 回复

HTML的英文全称是 Hypertext Marked Language,即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee(喜欢称呼他为李爵士)和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。

HTML 起手详解

qishoushi.png qishoushi.png

1、DOCTYPE是document type (文档类型) 的缩写,主要作用是告诉浏览器的解析器使用哪种规范来解析页面这个文档。

2、lang="zh-CH"主要是页面语言的声明,我们一般是写zh-CH(代表简体中文),不会写zh因为像香港等他们会用中文繁体字,或者像新加坡等也有自己的中文写法(zh-SG),例如我们各省的方言,虽然都是说的中文但你有可能听不懂。

3、head标签是头部的意思,顾名思义标签用于定义文档的头部,它是所有头部元素的容器。head的默认属性是display:none代表其容器的内容不会显示在网页的页面上。

4、 标签内的charset 属性规定 HTML 文档的字符编码,"UTF-8"是告诉浏览器此页面是什么字符编码格式。其他字符格式有:gb2312、gbk等。

5、viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。width=device-width代表页面宽度是客户端(电脑、手机等)的屏幕宽度,initial-scale用于设置Web页面的初始缩放比例,initial-scale=1.0代表客户端屏幕显示未见缩放的页面。简而言之就是禁止缩放,兼容手机。

6、X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。而"ie=edge"会告诉IE浏览器以最高版本内核来渲染页面。

7、

xxxx中的xxxx代表网页的标题,可以按照自己的需求设置。

HTML中常用的章节的标签

<!DOCTYPE html>
<html lang="zh-CH">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>起手式的写法</title>
</head>
<body>
    <header>我是头部,我很重要,可以发广告。</header>
    <div>
        <main>
            <section>
                <h1>章节标签介绍(我是h1)</h1>
                <section>
                    <p>这里是章节的正文了</p>
                    <h2>1.1 介绍(我是h2)</h2>
                </section>
                <section>
                    <p>这是第二次介绍了</p>
                    <h3>1.2 介绍</h3>
                </section>
            </section>
            <aside>
            我是旁支内容,参考资料1 2 3
            </aside>
            <footer>&copy;我可以写版权声明,我是底部标签</footer>
        </main>
    </div>
</body>
</html>

xiaoguo .png xiaoguo .png

1、section 章节

2、article 文章

3、p 段落

4、header 头部

5、footer 脚部

6、main 主要内容

7、aside 旁支内容

8、div 换分

9、h1~h6 标题

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

1、class 规定元素的类名(classname),如需为一个元素规定多个类,用空格分隔类名。就像物品的名称一样,通过这个名称可以对元素做很多是操作,增加工作效率。

2、contenteditable 作用于一个元素,可以让该元素变成可编辑的。我们就可以在浏览器输入我们想输入的内容。

章节标签介绍(我是h1)

结果是:我们可以改变 "章节标签介绍(我是h1)", 可以输入任意文字。

3、hidden 用这个命令元素会被隐藏,块元素也会折叠起来。

4、id 用于元素定义唯一标识符,是惟一的。但是不建议使用,除非你有洁癖,因为如果你对不同的两个元素定义了同一个ID,容易产生错误,而且有可能命名的id与windows冲突,除非你特别了解在使用。

5、style 改变元素的样式,例如大小、颜色等。

6、tabindex 可以设置键盘中的TAB键在控件中的移动顺序,及焦点的顺序,让用户可以用键盘操控界面。很有意思的事如果tabindex的属性为负数,则永远用键盘TAB键找不到它的位置,而如果tabindex为正数,当它是0是它会是最后一个被键盘TAB键找到的。而不是在最前面。

7、title 当我们在某个元素输入的内容被部分用省略号代替隐藏时,我们可以把所有内容放入title中(title=“所有内容”),当鼠标光标放在这个元素身上是它会显示出所有内容。

HTML中的常用的内容标签

1、a 实现超链接

2、strong 加粗

3、em 告诉浏览器把其中的文本表示为强调的内容

4、code 标签中的文本内容将显示为等宽、类似电传打字机样式的字体。

5、pre 在页面中显示代码中原有的样子,因为当你在代码中输入多个空格或者回车是而页面只会显示一个,而用pre则会显示原来的样子

6、ol+li 有序列表

7、ul+li 无序列表

8、dl+dt+dd

标记定义了一个定义列表,
给出了术语名,
标记给出了术语的定义。

9、hr 分割线

10、br 强制换行

11、q(quote) q 元素用于简短的引用,如句子中的引用,仅仅是加上双引号而已。

12、blockquote blockquote 一般用于独立的、较长的引用块,浏览器会把 blockquote元素显示为一个独立的块,并为它插入换行和外边距。

{{topic.upvote_count || 0}}

HTML的英文全称是 Hypertext Marked Language,即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee(喜欢称呼他为李爵士)和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。

HTML 起手详解

qishoushi.png qishoushi.png

1、DOCTYPE是document type (文档类型) 的缩写,主要作用是告诉浏览器的解析器使用哪种规范来解析页面这个文档。

2、lang="zh-CH"主要是页面语言的声明,我们一般是写zh-CH(代表简体中文),不会写zh因为像香港等他们会用中文繁体字,或者像新加坡等也有自己的中文写法(zh-SG),例如我们各省的方言,虽然都是说的中文但你有可能听不懂。

3、head标签是头部的意思,顾名思义标签用于定义文档的头部,它是所有头部元素的容器。head的默认属性是display:none代表其容器的内容不会显示在网页的页面上。

4、 标签内的charset 属性规定 HTML 文档的字符编码,"UTF-8"是告诉浏览器此页面是什么字符编码格式。其他字符格式有:gb2312、gbk等。

5、viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。width=device-width代表页面宽度是客户端(电脑、手机等)的屏幕宽度,initial-scale用于设置Web页面的初始缩放比例,initial-scale=1.0代表客户端屏幕显示未见缩放的页面。简而言之就是禁止缩放,兼容手机。

6、X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。而"ie=edge"会告诉IE浏览器以最高版本内核来渲染页面。

7、

xxxx中的xxxx代表网页的标题,可以按照自己的需求设置。

HTML中常用的章节的标签

<!DOCTYPE html>
<html lang="zh-CH">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>起手式的写法</title>
</head>
<body>
    <header>我是头部,我很重要,可以发广告。</header>
    <div>
        <main>
            <section>
                <h1>章节标签介绍(我是h1)</h1>
                <section>
                    <p>这里是章节的正文了</p>
                    <h2>1.1 介绍(我是h2)</h2>
                </section>
                <section>
                    <p>这是第二次介绍了</p>
                    <h3>1.2 介绍</h3>
                </section>
            </section>
            <aside>
            我是旁支内容,参考资料1 2 3
            </aside>
            <footer>&copy;我可以写版权声明,我是底部标签</footer>
        </main>
    </div>
</body>
</html>

xiaoguo .png xiaoguo .png

1、section 章节

2、article 文章

3、p 段落

4、header 头部

5、footer 脚部

6、main 主要内容

7、aside 旁支内容

8、div 换分

9、h1~h6 标题

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

1、class 规定元素的类名(classname),如需为一个元素规定多个类,用空格分隔类名。就像物品的名称一样,通过这个名称可以对元素做很多是操作,增加工作效率。

2、contenteditable 作用于一个元素,可以让该元素变成可编辑的。我们就可以在浏览器输入我们想输入的内容。

章节标签介绍(我是h1)

结果是:我们可以改变 "章节标签介绍(我是h1)", 可以输入任意文字。

3、hidden 用这个命令元素会被隐藏,块元素也会折叠起来。

4、id 用于元素定义唯一标识符,是惟一的。但是不建议使用,除非你有洁癖,因为如果你对不同的两个元素定义了同一个ID,容易产生错误,而且有可能命名的id与windows冲突,除非你特别了解在使用。

5、style 改变元素的样式,例如大小、颜色等。

6、tabindex 可以设置键盘中的TAB键在控件中的移动顺序,及焦点的顺序,让用户可以用键盘操控界面。很有意思的事如果tabindex的属性为负数,则永远用键盘TAB键找不到它的位置,而如果tabindex为正数,当它是0是它会是最后一个被键盘TAB键找到的。而不是在最前面。

7、title 当我们在某个元素输入的内容被部分用省略号代替隐藏时,我们可以把所有内容放入title中(title=“所有内容”),当鼠标光标放在这个元素身上是它会显示出所有内容。

HTML中的常用的内容标签

1、a 实现超链接

2、strong 加粗

3、em 告诉浏览器把其中的文本表示为强调的内容

4、code 标签中的文本内容将显示为等宽、类似电传打字机样式的字体。

5、pre 在页面中显示代码中原有的样子,因为当你在代码中输入多个空格或者回车是而页面只会显示一个,而用pre则会显示原来的样子

6、ol+li 有序列表

7、ul+li 无序列表

8、dl+dt+dd

标记定义了一个定义列表,
给出了术语名,
标记给出了术语的定义。

9、hr 分割线

10、br 强制换行

11、q(quote) q 元素用于简短的引用,如句子中的引用,仅仅是加上双引号而已。

12、blockquote blockquote 一般用于独立的、较长的引用块,浏览器会把 blockquote元素显示为一个独立的块,并为它插入换行和外边距。

11
回复 编辑