HTML 简单认识

HTML(HyperText Markup Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言,也是制作网页的最基本的语言,它可以直接由浏览器执行。

1.HTML 是用来描述网页的一种语言。

2.HTML 指的是超文本标记语言: HyperText Markup Language

3.HTML 不是一种编程语言,而是一种标记语言

4.标记语言是一套标记标签 (markup tag)

5.HTML 使用标记标签来描述网页

6.HTML 文档包含了HTML 标签及文本内容

7.HTML文档也叫做 web 页面

由 HTML 组成的网页的基本结构

文档类型声明 <!DOCTYPE html>      --这是html5的声明方法

头部标记(<head>….</head>)

包含文档的标题信息,头部标记都不可或缺!

主体标记(<body>…..</body>)

包含了文档的内容

中文编码声明(<meta charset = “utf-8”>)

HTML常用标签

<p>…</p>    定义一个段的块级标记      |     <br />   换行标记       |      <h1> …<h6>    标题标记

<ul>  </ ul>   无序列表标记,表示列表所包含的项是没有先后顺序的!列表项使用<li>表示。

<ol>  </ ol>   有序列表标记,表示列表所包含的项是有先后顺序的!列表项使用<li>表示。

<dl>  </ dl>    定义列表,定义列表至少包含一条术语(dt)或一条说明(dd)

<dt>  </ dt>   标明一个术语要说明的对象

<dd>  </dd>  列表项说明

<b>   </b> 或 <strong>  </strong>          文本加粗

<i>    </i> 或 <em>    </em>                    文本倾斜

<div>  </div>   块级元素   |    <span> </ span>  行内元素    |    <hr />   分隔线     |     <del>  <del />    删除线

< img >      图像的行内标记

<img  src = “lianhua.jpg ”  alt = “莲花之美”>

src 是图片的路径参数;

网页设计中的所有文件,原则上都必须放置在一起,即在同一个文件夹下(这个文件夹是网页的“根”文件夹)

相对路径:参照自身的位置,而定义的路径,叫做相对路径

相对路径有三种表示方法:

1.Html文档和图片在同一个目录下,直接写图片名称

        2.Html文档和图片所在的文件夹在同一个目录下,先写文件夹名称,再写图片名称

        3.Html文档所在文件夹和图片所在文件夹在同一个目录下,则需要先用”../ ”找到根目录,

再写图片所在文件夹的名称,最后写图片名称

-> 图片大小              <img width = “ ”  height = “ “ />

网页中长度单位多使用 px ,即像素。

-> 图标替代文体      <img alt = “图片替代的文本内容” />

在网络较慢的环境中,如果没有出现图片,将以文本替代图片显示

-> 图片提示              <img title = “提示文本” />

  在鼠标放置图片上时提示的文本。多数标签都有此属性,但浏览器的支持不全面!

HTML 文字排版标记

1.<big></big> 定义大字体的文字 不符合标准网页设计的理念,不赞成使用.

2.<small></small> 定义小字体的文字

3.<sup></sup> 上标

4.<sub></sub> 下标

HTML 特殊符号

“&lt;” 和 &gt;”    “<”  和   “>”           |          &laquo;  &raquo;     <<     >>

&lsaquo;    &rsaquo;    <  >          |        &copy;      版权          &amp      &

超链接 

<a>  </a>     通过使用属性href来指定要链接的url,标签的内容可以为文本也可为其他标签

①<a href="2.html">点击进入2网页</a>,点击文字进入2.html

②<a href="2.html"><img src="two.jpg" /></a>,点击图片进入2.html

① a:link:未访问链接 ,如 a:link {color:blue}
② a:visited:已访问链接 ,如 a:visited{color:blue}
③ a:active:激活时(链接获得焦点时)链接的颜色 ,如a:active{color:blue}
④ a:hover:鼠标移到链接上时 ,如 a:hover {color:blue}

锚点的使用

1.定义锚点<a id=“zj”>第三章</a>

2.定义指向该锚地的链接<a href=“#zj”>点击查看第三章</a>

下载链接的使用

如果url指向的不是一个html文件,那么点击时将下载该文件

表格的基本结构

1)<table> </ table>       定义表格的基本框架

2)<tr>  </tr>               定义表格的行

3)<td>  </td>              定义表格行内单元格

4)<th> </th>               定义表格行内单元格(标题),自动将文本加粗,居中对齐

表单

表单的组成:一个表单有三个基本组成部分:

1)表单标签:这里面包含了处理表单数据所用程序的url,以及数据提交到数据服务器的方法。

2)表单域:包含了文本框,密码框,隐藏域,多行文本框,复选框,下拉框和文件上传框等。

HTML 入门第一课的更多相关文章

  1. Asp.Net Web API 2(入门)第一课

    Asp.Net Web API 2(入门)第一课   前言 Http不仅仅服务于Web Pages.它也是一个创建展示服务和数据的API的强大平台.Http是简单的.灵活的.无处不在的.你能想象到几乎 ...

  2. emacs 入门第一课:Emacs里的基本概念

    Table of Contents 无聊的开场白 buffer(缓冲区) window(窗口)与frame Emacs的mode Emacs Lisp 函数function.命令command.键绑定 ...

  3. Android入门第一课之Java基础

    通知:由于本周六场地申请没通过,所以本周的培训临时取消. 今天给大家带来的是Android入门的第一课,由于教室申请的不确定性,因此,每次培训的内容都会在博客先提前释放出来.首先Android的APP ...

  4. Docker入门 第一课 --.Net Core 使用Docker全程记录

    微服务架构无疑是当前最火热的开发架构,而Docker作为微服务架构的首选工具,是我们必须要了解掌握的. 我通过一天的时间,网上查文档,了解基础概念,安装Docker,试验Docker命令,通过Dock ...

  5. Kotlin入门第一课:从对比Java开始

    1. 介绍 今年初,甲骨文再次对谷歌所谓的安卓侵权使用Java提起诉讼,要求后者赔偿高达90亿美元.随后便传出谷歌因此计划将主力语言切换到苹果主导的Swift,不过这事后来没了跟进. 但谷歌在这两天的 ...

  6. Spring入门第一课:Spring基础与配置Bean

    1.入门 Spring是简化java开发的一个框架,其中IoC和AOP是Spring的两个重要核心.由于Spring是非侵入性的,通过Ioc容器来管理bean的生命周期,还整合了许多其他的优秀框架,所 ...

  7. JavaScrip 入门第一课

    一.代码引入的三种方式 1.直接在head中书写 在head标签里面可以写,在body标签里面也可以写,放到head标签里面和放到body标签里面到底有什么区别,我们后续在讲~ <head> ...

  8. python 语言学入门第一课必看:编码规范

    命名 module_name, package_name, ClassName, method_name, ExceptionName, function_name, GLOBAL_VAR_NAME, ...

  9. 1、C#入门第一课

    C# 读作C Sharp,所以程序文件的扩展名为.cs 新建项目-窗体应用程序 所谓的Visual C#就是指的可视化编程,主要在设计窗口布置好自己的控件(一些具有一定功能的小部件,例如如可以点击的按 ...

  10. Android 入门第一课 一个简单的提示框

    1.打开Android开发环境Eclipse来到主界面 2.新建一个安卓项目 File->New->Android Application project 在上面有红色错误的地方填上应用程 ...

随机推荐

  1. spring bean 的作用域

    spring bean 的作用域: 1.单例(singleton):默认是单例模式,也就是说不管给定的bean被注入到其他bean多少次,注入的都是同一个实例. 2.原型(prototype):每次注 ...

  2. Jquery拖拽,拖动排序插件

    上github搜jquery-sortable <!-- jq拖拽排序 --> <script src="${contextPath}/static/excelTable/ ...

  3. OPGL+VS2017+GLFW+GLEW配置详细步骤

    OPGL+VS2017+GLFW+GLEW配置详细步骤: https://blog.csdn.net/weixin_40921421/article/details/80211813 原博客地址:ht ...

  4. centos7 命令 对比 cenots6 命令

    1)  列出所有service开机启动项 centos 7 systemctl list-unit-files |grep enabled centos 6 chkconfig --list|grep ...

  5. 使用vs进行Nuget打包时的LicenseExpression填写示例参考

    新版的nuget包 PackageLicense 这样写 最近编译类库项目的时候发现总是有个 licenseUrl 的警告,警告信息如下: warning NU5125: The 'licenseUr ...

  6. 喵星之旅-狂奔的兔子-基于docker的rabbitmq安装

    docker安装参考:喵星之旅-狂奔的兔子-docker安装和基本使用 一.查询镜像名称 由于我们要安装的是有web管理页面的,不能直接拉取,需要指定版本. 登录docker仓库查询:https:// ...

  7. 作业2:go实现一个压测工具,具备upload功能

    作业:go实现压测工具,具备upload功能. upload内容是.tar.gz,使用http协议上传. 要求:upload的文件名,http目的地址灵活可配. deadline:2019.4.30

  8. HTML5地理定位(已知经纬度,计算两个坐标点之间的距离)

    事实上,地球上任意两个坐标点在地平线上的距离并不是直线,而是球面的弧线. 下面介绍如何利用正矢公式计算已知经纬度数据的两个坐标点之间的距离.半正矢公式也成为Haversine公式,它最早时航海学中的重 ...

  9. C/C++编程规范

    1.文件结构 C/C++程序通常分为两个文件,一个文件用于保存程序的声明,一个文件用于保存程序的实现. 1.1 版权和版本的声明 版权和版本的声明位于头文件和定义文件的开头,主要内容有:(1)版权信息 ...

  10. Hadoop3.1.1源码Client详解 : Packet入队后消息系统运作之DataStreamer(Packet发送) : 主干

    该系列总览: Hadoop3.1.1架构体系——设计原理阐述与Client源码图文详解 : 总览 在上一章(Hadoop3.1.1源码Client详解 : 写入准备-RPC调用与流的建立) 我们提到, ...