• 初识HTML


    前言

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

    内容

    HTML定义

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

     

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

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

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

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

    Html文件

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

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

    开发工具

    Dreamweaver、记事本或EditPlu。

    语法

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

    文档结构

     

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

    显示结果如图:


    部分语法属性

    文字的字体(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>

    显示:


    字体加粗(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>

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


    换行标签<BR>

    举例:

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

    显示结果:

                              

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

    小结

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

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


    感谢您的宝贵时间~~~


  • 相关阅读:
    【JUC源码解析】AQS
    【JUC源码解析】Exchanger
    圣杯布局和双飞翼布局的理解和区别
    右侧固定宽度,左侧自适应屏幕的布局(笔试题)
    CSS和CSS3中的伪元素和伪类(总结)
    用CSS创建小三角形问题(笔试题常考)
    Pycharm下载安装和使用
    PIC33单片机中断服务函数写法(其他单片机同样适用)
    记录,ubuntu16.04将gitlab迁移到docker上遇到的一些问题与解决方法
    【算法】 算法效率
  • 原文地址:https://www.cnblogs.com/zhoulitong/p/6412415.html
Copyright © 2020-2023  润新知