[置顶] 初识HTML

前言

    学到牛腩前台设计部分,发现出现了一些Html的东西,感觉自己又不懂了,于是还是决定花一些时间去了解一下,方便以后的学习。

内容

HTML定义

    首先我们先绕过Html5,去看看Html。上图:

 [置顶] 初识HTML_第1张图片

    其中Html是属于一些Web开发部分,学习Web前段开发基础需要掌握的除了这个还有:CSS,JavaScript语言。在这里简单说一下CSS、JavaScript的实现效果。

    1、HTML是网页内容的载体,内容就是制作者想要用户浏览的信息,比如:图片、视频等。

    2、CSS样式就是表现,主要着重一些外观控制,比如:标题字体,颜色变化,背景优化等。

    3、JavaScript是用来实现网页上的特效效果,比如:鼠标滑过弹出下拉菜单,如果还是傻傻分不清楚可以这样理解,凡是有动画的,交互的一般都是用JavaScrip实现的。

Html文件

    1、是一个文本文件,包含了一些HTML元素、标签等。

    2、大小写不敏感,HTML和Html是一样的。

开发工具

Dreamweaver、记事本或EditPlu。

语法

    这里指介绍一些常用的语法,当然后续Html5升级版会和这个有所不同,但是换汤不换药。

文档结构

 [置顶] 初识HTML_第2张图片

  • HTML标签:成为根标签,所有的网页标签都在<html></html>中。
  • Head标签:代表HTML文档的头信息,以<head>开始,</head>结束,它网页的头部元素的容器。元素主要有:<title>、<scrip>、<style>、<link>、<meta>等。
  • Body标签:在<body>和<body>标签之间的内容代表HTML文档的主体。包括如<h1>、<p>、<a>、<img>等网页内容标签。

显示结果如图:

[置顶] 初识HTML_第3张图片

部分语法属性

文字的字体(font)和颜色(color)

基本语法及举例:

<span style="font-family:KaiTi_GB2312;font-size:18px;"><html> 
<head>
    <title>h标签演示</title>
</head>
<body>
    <font  face="黑体" color="red">文字的字体和颜色</font>
</body>
</html></span>

文章标题(H标签)

举例:

<span style="font-family:KaiTi_GB2312;font-size:18px;"><html> 
<head>
    <title>h标签演示</title>
</head>
<body>
    <h1>我是h1标签</h1>
    <h2>我是h2标签</h2>
    <h3>我是h3标签</h3>
    <h4>我是h4标签</h4>
    <h5>我是h5标签</h5>
    <h6>我是h6标签</h6>
</body>
<html></span>

显示:

[置顶] 初识HTML_第4张图片

字体加粗(B标签)

<span style="font-family:KaiTi_GB2312;font-size:18px;"><html> 
<head>
    <title>B标签演示</title>
</head>
<body>
    这是没有使用b标签的正常字体
    <b>使用b标签加粗的字体</b>
</body>
<html></span>

斜体标记<i>、<em>、<cite>

基本语法:

<span style="font-family:KaiTi_GB2312;font-size:18px;"><i> ……</i>

<em> ……</em>

<cite> ……</cite></span>

举例:

<span style="font-family:KaiTi_GB2312;font-size:18px;"><html>
<head> 
    <title>斜体标记i,em,cite标签</title>
</head>
<body>
    <i>斜体标记i演示</i>
    <em>斜体标记em演示</em>
    <cite>斜体标记cite演示</cite>
</body>
</html></span>


下划线标记<U>和删除线标记<s>

下划线基本语法:

<u>……</u>

删除线标记基本语法:   

  <s>……</s>
 <strike>……</strike>

段落标记(P)

基本语法:<p>...</p>

举例:

<span style="font-family:KaiTi_GB2312;font-size:18px;"><html>
<head>
    <title>P标签示例</title>
</head>
<body>
    <p>这是第一个段</p>
    <p>这是第二个段</p>
</body>
</html></span>

显示结果:(浏览器会自动在段落的前后添加空行。)

[置顶] 初识HTML_第5张图片

换行标签<BR>

举例:

<span style="font-family:KaiTi_GB2312;font-size:18px;"><html>
<head>
    <title>BR标记示例</title>
</head>
<body>
    这是第一段<br />
    这是第二段
</body>
</html></span>

显示结果:

                          [置顶] 初识HTML_第6张图片[置顶] 初识HTML_第7张图片

    上面是自己对于HTML一些小小的了解,希望在以后的学习中多多的进步。

小结

1、不积跬步无以至千里。

2、站在巨人的肩膀上,起点绝不是常人。


感谢您的宝贵时间~~~


你可能感兴趣的:([置顶] 初识HTML)