HTML入门

    Html介绍:

1.计算机,高手----黑客

2.最好的学习html的方法就是参考别人的网页,源代码

3.查看网页源代码---打开网页,右击鼠标,查看源文件    html非常重要

4.制作一个html网页     html文件是通过浏览器查看

5.html标记语法,书写规则

6.如何制作一个html网页文件

****  裸奔(只有内容没有样式)

1)      新建一个记事本的文件,将他重命名  *.html

2)      在里面输入网页的信息内容。

3)      再要修饰的内容两侧加上html标记

7.html标记的语法,标记分为两种:单标记、双标记

<标记符>没有结束的标记-----单标记

<开始标记符></结束标记符>

****  源代码中的效果并不是网页最后的效果

<br />换行

Html所写的全都是给浏览器看的不是给用户看的。用户看的只是内容。

一、基础:

在xhtml中,规定所有html标记都要小写,所有的标记都要有关闭。

html-----------xhtml

<br>-----------<br />

二、html标记的类型

(一)单标记语法

1.<标记名称>   ---------单一型,无属性值      eg:<br />

2.<标记名称 属性=”属性值“>  ---------单一型,有属性值      eg:<hr width="80%" />

(二)双标记语法

1.<标记名称>...</标记名称>   ---------没有属性值             eg:<title></title>

2.<标记名称 属性=“属性值”>...</标记名称>     --------有属性值    eg:<body bgcolor="red">...</body>

(三)html标记语法总结

1.单标记:<标记>

2.双标记:<开始标记>内容</结束标记>

3.标记的属性:<标记 属性1=“参数1” 属性2=“属性2”.。。>内容</标记>

说明:

a、标记与属性、属性之间以空格分隔。

b、属性不区分先后顺序:且属性是不必要的

重点强调:虽然在html中标记不区分大小写,但是在xhtml中只能用小写,所以建议从现在开始所有标记都使用小写。

三、html文档结构

1.做网页的------html文件------用浏览器打开

2.所有html文件都有一个基本结构------框架

<html>

  <head>

    <title>

    </title>

  </head>

  <body>

    正文

  </body>

</html>

<html>.......</html>标识网页文件的开始与结束,所有的html元素都要放在这对标记中。

<head>......</head>标识网页文件的头部信息,如:标题,搜索引擎,关键字等。

<title>......</title>标识网页文件的标题。

<body>......</body>标识网页文件的主体部分。

文件都有文件名,我们网页的文件名 html文件,可不可以使用中文呢?

如果是在本地电脑,没什么问题将来网页文件都是保存服务器上的,建议都是用中文。

Html有什么作用?

控制网页内容(让浏览者看到的信息)

****如何调出文件的扩展名

工具菜单------文件夹选项-----查看------去掉 隐藏已知文件类型的扩展名(找不到文件夹选项)

meta:

1. meta标记用于定义文件信息,对网页文件进行说明便于搜索引擎查找。放置于<head></head>之间。

2.设置关键字:<meta name="keywords" content="value">多个关键字内容之间可以用“,”分隔。

3.设置描述:<meta name="description" content="value">

4.设置作者:<meta name="author" content="作者名">

5.设置字符集:<meta http-equiv="content-type" content="text/html;charset=gb2312">

6.设置页面定时跳转:<meta http-equiv="refresh" content="2;URL=http://ww.baidu.com" />

四、标记元素的特点     *某些html标记是有默认值的。可以直接输入标记,查看标记的默认状态

(一)网页主体标记body

1.注释:<!--注释内容-->

2.body属性:

<body bgcolor="背景颜色" background=“背景图像” text=“文本颜色” link=“链接文本颜色” vlink=“访问过的文本颜色” alink=“激活的链接文本颜色” leftmargin="左边界" rightmargin=“右边界” topmargin=“上边界” bottommargin=“下边界”>

(二)editplus

****在editplus中复制一行的快捷键  Ctrl+j

在编辑器中,html代码是有颜色区别的:

html标记==蓝色的

标记属性==红色

标记属性的值==紫色

Html注释==绿色

Html标签 html元素 html标记 都是一个东西。

(三)Html语义说明

1.字体修饰:

(1)<font>标记

语法: <font color="文本颜色" size=“字号” face=“字体“>文本</font>

注:网页中的文本字体、字号一般通过css来修饰

(2)字符格式    

    功能          标记

    加粗         <b>文本</b>

    倾斜         <i>文本</i>

    加强语气(加粗)   <strong>文本</strong>

    加强语气(倾斜)   <em>文本</em>

    下划线        <u>文本</u>

    删除线        <s>文本</s>

    上标         <sup>文本</sup>

    下标         <sub>文本</sub>

我们再写代码的时候,流程是这样的, 先写我们的控制内容的标记,例如这内容比较重要可以在语义上加权

<strong>关键字</strong>

一个文章网页的主题-----推荐使用 <h1>文章标题</h1>

网页段落文字内容---<p>段落内容</p>段落内容</p>

(3)段落控制标记

a、段落标记;

格式: <p align="对齐方式">····</p>        

 属性名称    属性值   说明

  align  left    左对齐

      right     右对齐

      center   居中

b、段落控制标记;

段落标题:<hx align="对齐方式">····</hx>    段落标题   说明

x取值[1-6]hx内的文本会自动显示加粗   H1—h6标记默认文字加粗显示

hx针对的对象是段落,而font针对的对象是任意文本

(4)换行:<br /> 换行不换段

(5)修饰标记:

水平直线:<hr />

属性名称  属性值         说明

size    像素,绝对设置          以数字表示,属性值越大,线越粗

      百分比,相对设置   以%表示,属性值越大,线越粗

width    像素,绝对设置         长度不会应视窗的改变而改变

     百分比,相对设置   长度会随着视窗的改变而改变

nohsade=”noshade“  实体线

绝对值大于屏幕时不会折行,会形成滚动条   不加%表示像素

在xhtml中,所有的标签都必须要用属性值,如果没有,使用属性名。

例如   <hr noshade=”noshade” />------xhtml

<hr noshade>-------html

(6)特殊标记

a、定义一个块引用:使文本缩进

格式:

属性名称      属性值      

<blockquote>....</blopckquote>

b、居中标记

<center>内容</center> (被废弃的标签)

c、予格式化:

<pre></pre>

显示已经格式化好的文字,不加此标记的话,HTML浏览器会忽略所有空格和制表符。

(7)特殊字符的使用:

特殊字符      转义码

空格        &nbsp;

版权号©      &copy;

注册商标®     &reg;

"           &quot;

&         &amp;

<         &lt;

>         &gt;

*在第一个文字前桥空格是不起作用的,在两个文字中间不管敲多少空格都显示一个空格

转义码后面的;要记得加上,想要空格明显就多几个 效果就会明显好多

(8)列表的标记:

A、列表标记用途:

列表标记可以创建一般的无序列表,编号列表以及定义列表3种方式。还可以在一种列表中镶嵌另一种列表。便于概括显示一系列相关的内容。

a、无序列表<ul>...</ul>

b、有序列表<ol>...</ol>

c、定义列表<dl>...</dl>

B、列表的标记:

无序列表:

语法:<ul type="项目符号类型">

<li type="项目符号类型">内容1</li>

<li>内容2</li>

·····

</ul>

<li></li>表示一个项目

有序列表:

语法:<ol start="列表起点"type=”项目符号类型“>

<li>内容1</li>

<li>内容2</li>

....

</ol>

定义列表:

语法:<dl>

<dt>标题1</dt>

<dd>内容1</dd>

<dt>标题2</dt>

<dd>内容2</dd>

<dt>标题3</dt>

<dd>内容3</dd>

</dl>

*<dl></dl>定义列表

*<dt></dt>表示一个项目

*<dd></dd>表示一个项目下的更详细的内容解释

(9)图片

web上支持的格式:

*GIF(图形交换格式):GIF格式文件最多只能保存256种颜色。该格式支持透明色,支持动画效果。

*JPEG(联合图像专家组):该格式不支持透明色及动画,颜色可达1670万种

*PNG(网络可移植格式):该格式支持透明色,不支持动画效果,颜色从几种至1670万种。

* 图片标记

路径:

a、绝对路径:提供目标文档的完整主机名称、路径信息、及文档全称

b、相对路径:从当前文档开始的路径

*如果当前文档和目标文档位置平行,则直接书写当前目标文档全称

*如果当前文档和目标文档所在文件夹位置平行,则书写为文件夹名称/目标文档全称

*如果当前文档文件夹和目标文档所在文件夹位置平行,则书写为../目标文档全称

c、根相对路径:从站点根目录开始的路径,以”/“开头

*<img src="图片的路径" />

五、表格

传统的网页布局方式-------使用table表格

Table表格原来是用于保存数据的,保存这种有个事清晰的数据

排版的时候要按照人眼的视觉习惯排版

(一)

1.因为表格中可以包含任何内容,所以在使用DIV+CSS之前网页设计师是使用表格对网页内容进行排版与布局的

2.表格基本结构:

<table>...</table>  定义表格

<tr>...</tr>     定义表行

<td>...</td>      定义表列(单元格)

<th>...</th>     定义标题栏(文字加粗)

3.行的属性:

属性        用途

<tr width="">   设置行的宽度 

<tr height="">   设置行的高度

<tr bgcolor="">  设置行的背景颜色

<tr align="">    设置水平对齐方式

<tr valign="">   设置垂直对齐方式[top middle bottom]

4.列(单元格)的属性

属性            用途

<td width="">        设置单元格的宽度

<td height="">       设置单元格的高度

<td bgcolor="">       设置单元格的背景颜色

<td background="">    设置单元格的背景图片

<td align="">       设置单元格的水平对其方式

<td valign="">       设置单元格的垂直对其方式

<td rowspan="">     设置行合并的数目

<td colspan="">       设置列合并的数目

<td nowarp="nowarp">  设置在单元格中不换行

(1)合并的思想:当合并多个内容的时候合并时就会有多余的东西。

例如: 有3列 3个td,当合并时就需要删除。合并两个单元格时就是要删除多余的td。

(2)推出一个合并删除td的公式:删除的个数=合并的个数-1.

(3)立体表格效果,其实就是将表格的亮边框与暗边框颜色进行对比。

*表格自身有边框。单元格自身也有边框。

(4)细线表格效果公式

a、将表格自身的border=0

b、给表哥设置背景颜色==细线颜色

c、单元格之间的距离==细线的粗细

当<td></td>之间没有内容时默认是不显示边框的,如果想看到边框就加  。

5.表格的标题:

<table>

<caption>...</caption>

</table>

*<caption>下的属性值有:

属性名称      属性值      说明

align        top      标题在表格上方

          bottom    标题在表格下方

6.表格的结构化

时间: 2024-10-10 08:11:53

HTML入门的相关文章

R语言快速上手入门

R语言快速上手入门 课程学习网址:http://www.xuetuwuyou.com/course/196 课程出自学途无忧网:http://www.xuetuwuyou.com 课程简介 本教程深入浅出地讲解如何使用R语言玩转数据.课程中涵盖R语言编程的方方面面,内容涉及R对象的类型.R的记号体系和环境系统.自定义函数.if else语句.for循环.S3类R的包系统以及调试工具等.本课程还通过示例演示如何进行向量化编程,从而对代码进行提速并尽可能地发挥R的潜能.本课程适合立志成为数据科学家的

笔记:Spring Cloud Zuul 快速入门

Spring Cloud Zuul 实现了路由规则与实例的维护问题,通过 Spring Cloud Eureka 进行整合,将自身注册为 Eureka 服务治理下的应用,同时从 Eureka 中获取了所有其他微服务的实例信息,这样的设计非常巧妙的将服务治理体系中维护的实例信息利用起来,使得维护服务实例的工作交给了服务治理框架自动完成,而对路由规则的维护,默认会将通过以服务名作为 ContextPath 的方式来创建路由映射,也可以做一些特别的配置,对于签名校验.登录校验等在微服务架构中的冗余问题

linux入门基础知识及简单命令介绍

linux入门基础知识介绍 1.计算机硬件组成介绍 计算机主要由cpu(运算器.控制器),内存,I/O,外部存储等构成. cpu主要是用来对二进制数据进行运算操作,它从内存中取出数据,然后进行相应的运算操作.不能从硬盘中直接取数据. 内存从外部存储中取出数据供cpu运存.内存的最小单位是字节(byte) 备注:由于32的cpu逻辑寻址能力最大为32内存单元.因此32位cpu可以访问的最大内存空间为:4GB,算法如下: 2^32=2^10*2^10*2^10*2^2 =1024*1024*1024

JAVA通信系列二:mina入门总结

一.学习资料 Mina入门实例(一) http://www.cnblogs.com/juepei/p/3939119.html Mina入门教程(二)----Spring4 集成Mina http://www.cnblogs.com/juepei/p/3940396.html Apache Mina 入门实例--创建一个MINA时间服务http://loftor.com/archives/apache-mina-quick-start-guide.html MINA2.0用户手册中文版--系列文

Storm入门(四)WordCount示例

Storm API文档网址如下: http://storm.apache.org/releases/current/javadocs/index.html 一.关联代码 使用maven,代码如下. pom.xml  和Storm入门(三)HelloWorld示例相同 RandomSentenceSpout.java /** * Licensed to the Apache Software Foundation (ASF) under one * or more contributor lice

浅谈Ubuntu PowerShell——小白入门教程

早在去年八月份PowerShell就开始开源跨平台了,但是一直没有去尝试,叫做PowerShell Core. 这里打算简单介绍一下如何安装和简单使用,为还不知道PowerShell Core on Ubuntu的同学们提供一点小小的入门帮助,谢谢大家支持~ PowerShell Core是由Microsoft开发的运行在.Net Core上的开源跨平台的任务自动化和配置管理系统. 1.   在Ubuntu 16.04上安装PowerShell Core a)         导入公共存储库GP

2.vue.js 入门环境搭建

原文链接:http://blog.csdn.net/luckylqh/article/details/52863026?locationNum=2&fps=1 vue这个新的工具,确实能够提高效率,在经历的一段时间的摧残之后,终于能够有一个系统的认识了,下面就今天的收获做一个总结,也是vue入门的精髓: 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. 这里有一个小技巧:如果在cmd中直接使用npm来安

学习mysql的笔记:mysql十大基本入门语句

学习mysql数据库,从最简单的十条入门语句开始.刚开始学习mysql,老师让我们用cmd控制台输入语句,而不是选择用工具输入,这是为了我们能够先熟悉mysql语句. 首先要先进入mysql,语句为:mysql -hlocalhost -uroot -p  然后回车,输入密码. C:\Users\Administrator>mysql -hlocalhost -uroot -p Enter password: ****** 成功进入的话会出现 Welcome to the MySQL monit

Java - Java入门(2-1am)

第一讲.Java入门 1. 计算机语言是人和计算机进行交互的一种工具,人们通过使用计算机语言编写程序来向计算机施令,计算机则执行程序,并把结果输出给用户. 2. 机器语言:由0.1序列构成的指令码组成 如:10000000  加        10010000减          11110000 打印 3. 汇编语言:用助记符号描述的指令系统 如: Mov   A, #10; Mov   B, #20; Add   A,  B; 4. 高级语言: 面向过程的高级语言:程序设计的基本单元为函数

一个入门rpc框架的学习

一个入门rpc框架的学习 参考 huangyong-rpc 轻量级分布式RPC框架 该程序是一个短连接的rpc实现 简介 RPC,即 Remote Procedure Call(远程过程调用),说得通俗一点就是:调用远程计算机上的服务,就像调用本地服务一样. RPC 可基于 HTTP 或 TCP 协议,Web Service 就是基于 HTTP 协议的 RPC, 它具有良好的跨平台性,但其性能却不如基于 TCP 协议的 RPC.会两方面会直接影响 RPC 的性能,一是传输方式,二是序列化. 众所