0
点赞
收藏
分享

微信扫一扫

Web阶段学习之HTML

修炼之士 2022-02-18 阅读 59

目录

一、前言:

二、HTML概述:

三、快速入门:

四、标签学习:

1. 文件标签:构成html最基本的标签

2. 文本标签:和文本有关的标签

3. 图片标签:

4. 列表标签: 

5. 链接标签:、

6. div和span:

7. 语义化标签:html5中为了提高程序的可读性,提供了一些标签。

8. 表格标签:

五、案例:


一、前言:

二、HTML概述:

        概念:是最基础的网页开发语言

        Hyper Text Markup Language 超文本标记语言
        超文本:超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
        标记语言:
            * 由标签构成的语言。<标签名称> 如 html,xml
            * 标记语言不是编程语言

三、快速入门:

1. html文档后缀名 .html 或者 .htm
2. 标签分为
   1. 围堵标签:有开始标签和结束标签。如 <html> </html>

   2. 自闭和标签:开始标签和结束标签在一起。如 <br/>

3. 标签可以嵌套:
   需要正确嵌套,不能你中有我,我中有你
   错误:<a><b></a></b>
    正确:<a><b></b></a>

4. 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
5. html的标签不区分大小写,但是建议使用小写。

四、标签学习:

1. 文件标签:构成html最基本的标签

html:html文档的根标签
head:头标签。用于指定html文档的一些属性。引入外部的资源
title:标题标签。
body:体标签
<!DOCTYPE html>:html5中定义该文档是html文档

2. 文本标签:和文本有关的标签

<h1> to <h6>:标题标签
             h1~h6:字体大小逐渐递减
         <p>:段落标签
         <br>:换行标签
         <hr>:展示一条水平线
            属性:
                 color:颜色
                 width:宽度
                 size:高度
                 align:对其方式
                     center:居中
                     left:左对齐
                     right:右对齐
         <b>:字体加粗
         <i>:字体斜体
         <font>:字体标签
         <center>:文本居中
             属性:
                 color:颜色
                 size:大小
                 face:字体

3. 图片标签:

img:展示图片
     属性:
         src:指定图片的位置

4. 列表标签: 

有序列表:
     ol:
     li:
无序列表:
     ul:
     li:

5. 链接标签:、

a:定义一个超链接
    属性:
        href:指定访问资源的URL(统一资源定位符)
        target:指定打开资源的方式
            _self:默认值,在当前页面打开
            _blank:在空白页面打开 

6. div和span:

div:每一个div占满一整行。块级标签
span:文本信息在一行展示,行内标签 内联标签

7. 语义化标签:html5中为了提高程序的可读性,提供了一些标签。

 1. <header>:页眉
 2. <footer>:页脚

8. 表格标签:

table:定义表格
      width:宽度
      border:边框
      cellpadding:定义内容和单元格的距离
      cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
      bgcolor:背景色
      align:对齐方式
tr:定义行
    bgcolor:背景色
    align:对齐方式
td:定义单元格
    colspan:合并列
    rowspan:合并行
th:定义表头单元格
<caption>:表格标题
<thead>:表示表格的头部分
<tbody>:表示表格的体部分
<tfoot>:表示表格的脚部分 

五、案例:

旅游网站首页:

代码比较简单且长,就不放了

效果图:

举报

相关推荐

0 条评论