HTML入门

　　"超文本"就是指页面内可以包含图片.连接等非文字内容.

"标记"就是使用标签的方法将需要的内容包括起来.例如<a>www.itcast</a>

HTML能干什么?

　　HTML用于编写网页.平时上网通过浏览器我们看到的大部分页面都是由html编写的.在浏览器访问网页时,可以通过"右键/查看网页源代码"看到具体的html代码.

　　网页内容包含:HTML代码.css代码.javaScript代码等内容.

　　Html代码:用于展示需要显示的数据

　　CSS代码:使显示的数据更加好看.

　　javaScript代码:使整个页面显示的数据具有动画效果.

网页根据内容是否改变分为:静态页面,动态页面

　　静态页面:编写之后在浏览器不再改变的网页,HTML就是用于编写静态网页的.

　　动态页面:会根据不同的情况展示不同的内容.例如:登录成功后右上角显示用户名

HTML语言的特点:

　　HTML文件不需要编译,直接试音浏览器阅读即可.

　　HTML文件的拓展名是*.html或*.htm

　　HTML结构都是由标签组成的:

　　　　标签名预先定义好的,我们只需要了解其功能即可.

　　　　标签名不区分大小写.

　　　　通常情况下标签由开始标签和结束标签组成.

　　　　如果没有结束标签,建议以/结尾.

　　HTML结构包括两部分:头head和body

HTML入门代码

　　我这里使用的是HBuilder这个软件.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        这里是正文
    </body>
</html>

以上使用的标签组成了HTML页面的基本结构,现将所有标签进行陈述:

<html>这个页面的根标签,理论上一个页面只需要一个,由头和体组成.

<head>头标签,用于引入监本.导入样式.提供元信息等.一般情况下头标签的内容在浏览器端都不显示.

<body>体标签,是整个网页的主体,我们编写的html代码基本上都在此标签体内.

　　使用浏览器进行打开.

注释特点:

　　浏览器查看时,不显示,右键查看源代码可以进行查看.

　　注释标签不能嵌套.　　

　　注释特殊用法,为不同的浏览器提供了不同的解决方案(了解)

基本标签:

标题标签<hr/>

<hr/>标签在HTML页面中创建一条水平分隔线,用于定义内容中的主体变化.

　　size属性:水平线的高度,单位像素.

　　noshade属性:没有阴影,取值:noshade表示显示纯色.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        <!--显示水平线-->
        <hr />
        <hr size="5"/>    
        <hr noshade="noshade" />
        
        这里是正文
    </body>
</html>

效果图是这样的:

字体标签

用于设置字体尺寸,字体颜色等.

　　size属性:设置字体的大小.可能的值:从1到7的数字.浏览器的默认值是3.

　　color属性:设置字体的颜色

　　　　颜色的取值:#xxxxx或colorname

　　　　#xxxxxxx表示使用红绿蓝三原色设置颜色.

　　　　红绿蓝分别取值:00-FF,此处使用16进制.(FF就是十进制的255)

　　　　#000000表示黑色.#FFFFFF白色

　　　　#FF0000红色,#00FF00绿色,#0000FF蓝色

　　　　　　红绿蓝2位取值相同可以省略成1位.例如:#112233简化成#123

　　　　colorname使用英文单词确定颜色,red红色,blue蓝色,green绿色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        <!--字体-->
        <font size="7">我个头大</font>
        <font color="#FF0000">我很红</font>
        <font color="blue">我是蓝色的</font>
    </body>
</html>

效果:

格式化标签:

粗体

斜体

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        <b>我很粗</b>
        <i>我很斜</i>
    </body>
</html>

段落标签:

定义段落.p标签会自动在其前后创建一些空白

插入单个换行

<!DOCTYPE html>
<html>

<body>


同义词 FSF（自由软件基金会）一般指自由软件基金会 
自由软件基金会（Free Software Foundation，FSF）是一个致力于推广自由软件、促进计算机用户自由的美国民间非盈利性组织。 它于1985年10月由理查德·斯托曼建立。其主要工作是执行GNU计划，开发更多的自由软件，完善自由软件理念。

</body>

</html>

效果为:

使用刚学到的几个标签处理文本

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>

    <body>
        <!--使用标签进行处理的文本-->
        <p>
        <h1>公司简介</h1><br/>
 <font color="red" size="5"><b>view of headquarters sunset</b></font><br/>
华为是全球领先的ICT（信息与通信）基础设施和智能终端提供商，致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界。<br/>
我们在通信网络、IT、智能终端和云服务等领域为客户提供有竞争力、安全可信赖的产品、解决方案与服务，与生态伙伴开放合作，持续为客户创造价值，释放个人潜能，丰富家庭生活，激发组织创新。华为坚持围绕客户需求持续创新，加大基础研究投入，厚积薄发，推动世界进步。华为成立于1987年，是一家由员工持有全部股份的民营企业，目前有18万员工，业务遍及170多个国家和地区。

<h1>我们为世界带来了什么？</h1><br/>

为客户创造价值。华为和运营商一起，在全球建设了1,500多张网络，帮助世界超过三分之一的人口实现联接。<br/>华为携手合作伙伴，为政府及公共事业机构，金融、能源、交通、制造等企业客户，提供开放、灵活、安全的端管云协同ICT基础设施平台，推动行业数字化转型；为云服务客户提供稳定可靠、安全可信和可持续演进的云服务。华为智能终端和智能手机，正在帮助人们享受高品质的数字工作、生活和娱乐体验。

推动产业良性发展。华为主张开放、合作、共赢，与客户合作伙伴及友商合作创新、扩大产业价值，形成健康良性的产业生态系统。<br/>华为加入360多个标准组织、产业联盟和开源社区，积极参与和支持主流标准的制定、构建共赢的生态圈。我们面向云计算、NFV/SDN、5G等新兴热点领域，与产业伙伴分工协作，推动产业持续良性发展。

促进经济增长。华为不仅为所在国家带来直接的税收贡献，促进当地就业，形成产业链带动效应，更重要的是通过创新的ICT解决方案打造数字化引擎，推动各行各业数字化转型，促进经济增长，提升人们的生活质量与福祉。

推动社会可持续发展。<br/>作为负责任的企业公民，华为致力于消除全球数字鸿沟，在珠峰南坡和北极圈内，在西非埃博拉疫区、日本海啸核泄漏、中国汶川大地震等重大灾难现场，都有华为人的身影；推进绿色、低碳的环保理念，从产品规划、设计、研发、制造、交付以及运维，华为向客户提供领先的节能环保产品和解决方案；华为“未来种子”项目已经覆盖108个国家和地区，帮助培养本地ICT人才，推动知识迁移，提升人们对于ICT行业的了解和兴趣，并鼓励各国家及地区参与到建设数字化社区的工作中。

为奋斗者提供舞台。<br/>华为坚持“以奋斗者为本”，以责任贡献来评价员工和选拔干部，为员工提供了全球化发展平台、与世界对话的机会，使大量年轻人有机会担当重任，快速成长，也使得十几万员工通过个人的努力，收获了合理的回报与值得回味的人生经历。

<h1>我们坚持什么？</h1><br/>

华为30年坚持聚焦在主航道，抵制一切诱惑；坚持不走捷径，拒绝机会主义，踏踏实实，长期投入，厚积薄发；坚持以客户为中心，以奋斗者为本，长期艰苦奋斗，坚持自我批判。<br/>

我们不会辜负时代慷慨赋予我们的历史性机遇，为构建万物互联的智能世界，一往无前。<br/>    
</p>
    </body>

</html>

效果图如下

图片标签<img>

<img>在html页面中引入一张图片

　　src:指定需要显示图片的url(路径)

　　alt:图片无法显示时的替代文本

　　width:设置图像的宽度

　　height:定义图像的高度.

　　title:鼠标移上时显示.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>

    <body>
        <!--对照片进行处理-->
        

<img src="img/article(1).gif" alt="剁手节" width="100px" height="100px" title="美奴">


    </body>

</html>

图片没有路径时显示

移动到照片上时:

列表标签<ol><ul>

<ol> :定义有序列表

　　　　type列表类型,取值A.a.I.i,1等

<ul>:定义无序列表

　　　　type符号的类型.取值:disc实心圆,square方块,circle空心圆.

<li> 定义列表项.是<ul>或<ol>的子标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        <!--无序列表-->
        <ul type="circle">
            <li>无序</li>
            <li>无序</li>
            <li>无序</li>
        </ul>
        <ol type="I">    默认是阿拉伯数字
            <li>有序</li>
            <li>有序</li>
            <li>有序</li>
        </ol>
    </body>
</html>

效果为:

超链接标签<a>

<a>标签是超链接,是在html页面提供一种可以访问其他位置的实现方式.

　　href:用于确定需要显示页面的路径(URL)

　　　　target:确定以何种方式打开href所设置的页面,常用取值:blank,self等.

　　　　_blank:在新窗口中打开href确定的页面

　　　　_self默认,使用href确定的页面替换当前页面.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        <!--超链接-->
        <a href="http://www.baidu.com">百度</a>
    </body>
</html>

然后会转到:

表格标签<table><tr><td>

<table>是父标签,相当于这个表格的容器.

　　border表格边框的宽度

　　width表格的宽度

　　cellpadding单元边沿与其内容之间的空白

　　cellspacing单元格之间的空白

　　bgcolor表格的背景颜色

<tr>标签用于定义行.

<td>标签用于定义表格的单元格(一个列)

　　colspan单元格可横跨的列数

　　rowspan单元格可横跨的行数

　　align单元格内容的水平对齐方式.取值:left左,right右,center居中.

　　nowrap单元格中的内容是否折行.

<th>标签用于定义表头,单元格内的内容默认居中加粗.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        <!--表格-->
        <table border="1px"width="100px" height="100px">
            <tr>
                <td rowspan="3">
                    1
                </td>
                <td>
                    2
                </td>
                <td>
                    3
                </td>
            </tr>
            <tr>
            
                <td>
                    2
                </td>
                <td>
                    3
                </td>
            </tr>
            <tr>
            
                <td>
                    2
                </td>
                <td>
                    3
                </td>
            </tr>
            
        </table>
    </body>
</html>

效果如下:

posted @ 2019-04-21 17:12 King-DA 阅读(195) 评论(0) 编辑收藏举报

刷新页面返回顶部

King-D

king-d

HTML入门