HTML5入门教程

沙海
沙海
沙海
165
文章
2
评论
2017年2月2日14:18:31 评论 57 3035字阅读10分7秒

html5概述

超文本标记语言(hyper text markup language)

超文本:有着比文本更加强大的功能  普通文本只能书写文字
超文本可以书写文字 图片 视频 超链接等等超出文本的功能范畴
标记语言:由内置标签去描述的一门语言
后缀名以 *.html    *.htm结尾

作用

作用:用来制作各种各样的网页展示内容的

html语法规范

1 html文件里面的结构是由头标签和体标签组成   头部分(HEAD  体部分(body)
2 html标签是不区分大小写的    
3 html标签是由开始标签和结束标签组成  <font>内容</font>
      有主体内容的方式(双标签)      <font>内容</font>
      没有主体内容的方式(单标签)     <hr />
4 html标签中可以设置属性        <font 属性名1=“属性值1 属性名2=“属性值2”>内容</font>

html的入门程序

<html>
<head>
<title>这是标题</title>
</head>
<!--我是html的注释 可以用来做提示-->
<!--bgcolor:是标签的属性 用来设置网页的背景色-->
<body bgcolor="red">
    这里是正文
</body>
</html>
html标签  是网页的根标签  有且只能有一个,所有内容都要放在这个根标签下
head标签  网页的头部   用来设置网页标题的
body标签  网页的主体   网页的内容主要写在主体中 可用展示
<!--注释--> 功能与Java中的注释一样,可以出现多次可以出现任何地方
浏览器查看时不显示,右键查看源码可以看到

html的内置标签演示(重要) 使用iead开发工具来编写

文本标签

格式:<font 属性名1="属性值1" 属性名2="属性值2" ...>内容</font>
属性:
size:  设置字体大小   1最小 7最大
color: 设置字体颜色  可以使用英文设置  red    也可以使用光的三原色设置  #0000FF
face:  设置字体属性

排版标签

1 标题标签 格式:<hn></hn>   n代表1~6  1最大,6最小  会自动换行
属性:
align:对齐的方式  取值:left:左(默认)  center:居中 right:右

2 水平线标签 格式:<hr/>
属性:
width: 宽度
size: 粗细  
color: 颜色 
align:对齐的方式  取值:left:左 center:居中(默认)  right:右

3 换行标签 格式:<br />
4 加粗标签 格式:<b>内容</b>
5 斜体标签 格式:<i>内容</i>
6 下划线标签 格式:<u>内容</u>
7 段落标签 格式:<p>内容<p/>  属性:title 如果鼠标移动到段落上,会出现提示文字
ps:标签和标签之间可以互相嵌套,但是不能瞎嵌套

案例-制作公司介绍页面

需求:使用已经学习的标签,制作公司介绍的页面

代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公司介绍案例</title>
</head>
<body>
        <h1>公司简介</h1>
        <hr color="#FFA500"/>
        <!--空格是用特殊符号来控制的:  代表一个空格-->
        <p> <font color="red">“公司...”</font>是由<i><b>公司</b></i></p>
        <p>公司</p>
        <p>公司</p>
        <p>公司</p>
        <hr color="#FFA500"/>
</body>
</html>

超链接标签

格式: <a 属性名=“属性值”>内容</a>
属性:
href:代表要跳转的路径 (核心)
        1 跳转到互联网地址
        2 跳转到当前页面 #(页面不刷新)或""(页面会刷新)
        3 跳转到本地文件地址
        4 打开发邮件的客户端,给指定邮箱发邮件。mailto: 邮箱地址
        
target:打开方式 取值: _blank:新建窗口打开  _self:在自身窗口打开(默认)        
title:鼠标移上去以后显示提示信息

列表标签 可以将数据展示成列表的结构

格式一:有序列表标签
    <ol>
        <li></li>
        .....
    </ol>
属性:type  1 默认使用数字序列   a,A 使用字母序列   i,I 罗马数字

格式二:无序列表标签
    <ul>
        <li></li>
        .....
    </ul>
属性:type  disc  默认  square   circle 

图片标签

格式:<img />
属性:
src: 将指定的图片地址引入到html文件页面中 (核心)
width: 设置图片的宽度
height: 设置图片的高度
title: 鼠标移上去出现提示信息             
alt: 图片找不到的提示功能

内联标签和块标签

我们写了这么多,发现有些标签可以换行 有些标签不能换行 
内联标签:所有的标签内容都在一行   font  b  u  i...
块标签:标签内容和标签内容之间会自动折行  hr p  hn.. 
<div> <span> 单独使用没有任何意义 2个标签要结合css一起使用才能出现效果

表格标签(重要) 可以使页面的数据展示起来更加的规范和美观

格式:<table><tr><td>内容</td></tr></table>
<table>:表示表格
<tr>:表示一行
<td>: 表示一列
属性: (重要)
border:边框 默认没有
width:宽度  可以设百分比占满整个屏幕 
align:可以设置table tr td 
例如:align=center  table:整个表格居中  tr:一行的内容居中  td:单个单元格内容居中

单元格的属性:(重要)
rowspan 跨行
colspan 跨列

可选的:(了解)
设置单元格的属性:
一行一列代表一个单元格 整个表格是由多个单元格组成
cellspacing 设置单元格之间的间隔 默认2
cellpadding 设置单元格边框与文字之间距离 
th:表示表头 默认居中加粗(可以没有)
caption:表示表格名称(可以没有)
thead 不显示任何的内容,在逻辑上将表格分成不同的部分,表示表格的头部(了解)
tbody 表示表格的主体,无论我们的代码中有没有tbody,在浏览器中都是存在的(了解)
tfoot 表示表格的脚部(了解)

标签总结:

文本标签: <font>
排版标签: <hn> <br> <hr> <b> <i>  <u>  <p>
超链接:  <a>  属性:href
图片标签: <img> 属性:src
列表标签: <ol>有序   <ul>无序     <ol><li>内容</li></ol>
表格标签:<table><tr><td></td></tr></table>  合并单元

案例-制作旅游网首页页面

需求:使用今天学习的标签,制作如下的旅游网的页面

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" width="100%">
    <tr>
        <td>
            <img src="img/top_banner.jpg" width="100%"/>
        </td>
    </tr>
    <tr>
        <td>
            <table width="100%">
                <tr>
                    <td>
                        <img src="img/logo.jpg" />
                    </td>
                    <td align="center">
                        <img src="img/search.png" width=60%"/>
                    </td>
                    <td>
                        <img src="img/hotel_tel.png" width="70%"/>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
继续阅读
weinxin
资源分享QQ群
本站是一个IT技术分享社区, 会经常分享资源和教程; 分享的时代, 请别再沉默!
沙海
  • 版权声明:本站是一个IT技术分享社区,沙海技术团队的技术分享社区,我们会经常分享资源和教程。
  • 转载请注明:HTML5入门教程 - Java秀 ☜(ˆ▽ˆ)
最牛Java自学基础教程
阿里云企业级云服务器新用户1折特惠
美女讲师教你学C语言
2020部编版人教版初中语文七年级上册课件
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: