不知道大家怎么认为,反正我觉得写网页代码真的很有趣ヾ(≧▽≦*)o

难道你不想制作一个属于自己的网页吗,按自己的想法,不受别人的束缚,想想就很美好,

我会循序渐进地教大家一些关于写前端的知识,不过最重要的还是要自学哦。

接下来,就要开讲啦,想要写HTML代码,你必须知道的理论知识

html5怎么把代码示例显示在页面 html写代码_html

一,HTML文档结构

HTML 超文本标记语言 ,以.html结尾

文档格式:通常成对出现

html5怎么把代码示例显示在页面 html写代码_超链接_02

二,html元素之间的关系

html元素包括:开始标签+元素内容+结束标签

关系:父子关系 兄弟关系 子孙关系 后代关系

html5怎么把代码示例显示在页面 html写代码_html_03

1,如图,最外层的html元素包含了head和body元素,则head和body元素就是html元素的子元素,html元素为父元素

2,同时head和body元素都是在html元素之下,属于同级元素,我们称它们互为兄弟元素

3,而body中的p元素相对于html元素来说,是子元素的子元素,我们称之为子孙元素,

4,如果更往下嵌套(包括子孙元素),我们称之为后代元素

注意:除了某个元素的下一级元素我们称之为子元素,连续一层一层往下嵌套的都可以称之为后代元素

三,标签

整个html文档都是由标签组成,学会了每个标签的名称及功能,基本上你就学会了html语言

1,html:包裹所有的其他标签,是html最外层的元素

2,head:文档的头部

3,title: 表示网页的标题

4,body :所有的网页内容都放在body中。

5,div :表示一个容器或者盒子,可以在里面嵌套一些css代码

html5怎么把代码示例显示在页面 html写代码_嵌套_04

6,span :功能和div类似,可以用来装一小段文字,区别就是span可以再一行内显示,而div是独占一行

html5怎么把代码示例显示在页面 html写代码_超链接_05

7,h1-h6 表六级标题,效果是从h1开始文字逐渐变小

html5怎么把代码示例显示在页面 html写代码_超链接_06

html5怎么把代码示例显示在页面 html写代码_html_07

8,p标签 :段落标签,通常用来装一整段文字。

9,ul li标签 :ul为无序列表标签,li为里面的每个列表项目

html5怎么把代码示例显示在页面 html写代码_超链接_08

10,i em strong br hr

i,em表示斜体,strong标签表示加粗,hr表示一根水平分割线,br表示换行(hr,br都是单标签)

html5怎么把代码示例显示在页面 html写代码_嵌套_09

11,img :图像标签可以引入图像

alt属性,当图片没有办法显示时,用来提示用户的文字。

html5怎么把代码示例显示在页面 html写代码_超链接_10

12,a标签 :表示超链接,可以链接一切资源,比如网址,视频,文字等

href属性:超链接的地址百度

target属性:_blank表示新建一个浏览器,标签页来显示超链接的内容,不会覆盖原来的网页