18910140161

Html

首页 >> 前端开发 >> Html

HTML

顺晟科技

2021-10-03 11:45:17

24

 

HTML:  是用来制作网页的。

 

什么是网页:

只要一个文件的后缀是html或htm，该文件就是网页文件.

如：或者

 

此时已经创建好一个网页了，我们直接打开这个网页，先看看里面有什么!?

 

我们就想办法，给这个网页中添加点内容!!

 

我们需要右键网页-->使用记事本打开,随便写点问候!!!

 

记着，编写完以后，要保存，刷新网页!!

 

我们知道，一个网页上的文字，有大小，有颜色.... 各种外观

 

我们下面就像给这个字加个颜色再说别的!

 

 

此时，我们就是想把字变成红色,咋办呢？？？

 

这就引出了我们要学习的科目---> html

 

Html是什么： hyper text markup language (超文本标记语言)

 

归根结底，html这是一个语言。

 

语言的作用是沟通：

现在要学习的html是与浏览器沟通。想让浏览器按我们的意愿去做事情，就必须精通浏览器的语言：html.

 

先看一个例子：

 

 

练习：

  1. 创建一个文本文件
  2. 该后缀html(或htm)
  3. 右键网页-->记事本打开
  4. 要求，写出自己的名字，和自己的座右铭， 名字和座右铭的颜色要不一样!

 

 

 

 

HTML语法：

标记(标签)：就是在 < > 之间，加入一串字母。

比如: <font> <body> <title> <head> .....

 

关于属性要注意的地方:

  1. 所有标记的属性，都必须写在开始标记中.
  2. 属性和属性值之间用 “=” 连接
  3. 属性值应该用””或者’’引起来 (标准)

 

D.   属性和属性之间，用空格隔开

E.   属性之间没有先后顺序

 

F. 在同一个标记中，同一个属性只能用1次, 如果非要把一个属性用多次，则浏览器只认次出现的属性

 

 

关于标记要注意的地方:

  1. 标记不区分大小写

 

B. 标记分为单标记和双标记

eg. 单标记  <br />   特点就是，从左边开始，右边就结束，没有范围。

eg. 双标记  <font>...</font>

 

C. 元素 = 开始标记+中间内容+结束标记

比如<font>日出东方，唯我不败，千秋万代，一统江湖!!</font>

这就是一个font元素。

font元素的内容术语上叫做：“元素内容”

 

D. 所有属性，必须写在开始标记之中。

E. 标记可以嵌套， 如果嵌套的标记，与外边的标记属性有冲突，则使用就近原则!

 

 

 

 

Hbuilder的使用

 

 

 

 

 

标记学习

<font size=”字大小” color=”字颜色” face=”字体”></font>

<center>内容会居中</center>

<img src=”图片地址” width=”图片宽度” height=”图片高度” />

<hr width=”线的宽度” size=”线的粗细” color=”线的颜色”/>

 

利用以上标记制作一个简单的网页

 

<meta charset="utf-8">

 

<center>

<font size="7">

0905班级官方网站

</font>

<br />

首页     

日志     

相册     

留言板

<hr />

<br />

<img src="img/1.jpg" width="200" height="150" />

<img src="img/2.jpg" width="200" height="150" />

<img src="img/3.jpg" width="200" height="150" />

<br />

<img src="img/a1.jpg" width="200" height="150" />

<img src="img/a2.jpg" width="200" height="150" />

<img src="img/a3.jpg" width="200" height="150" />

<br />

<img src="img/a4.jpg" width="200" height="150" />

<img src="img/a5.jpg" width="200" height="150" />

<img src="img/a6.jpg" width="200" height="150" />

<br />

<hr />

班级邮箱: 0905java@163.com<br />

班级地址: 高速大厦3楼<br />

tel: 18812345678<br />

 

</center>

 

 

 

 

 

之前编写的代码，都不规范！ 规范的html代码是这样的：

 

 

例子：

 

 

 

下面详细学习标记内容：

 

  1. 文档标记

Body: 代表网页的体部

属性名

解释

bgcolor

控制背景颜色

background

控制背景图片， 如果背景色与背景图一起使用，则总是显示背景图

 

属性名

解释

text

控制整个页面范围内，所有文字的颜色

 

 

 

 

 

Html中的颜色表示方法

  1. 英文单词 red blue
  2. #后面跟6位16进制的数字

a) 前两位代表R (red)

b) 中间两位代表G (green)

c) 后两位代表B (blue)

d) #ff0000 就是红色  #ffff00就是黄色.....

  1. rgba表示法 (等学习到css再说...)

 

 

 

Head

Head元素中，有一个子元素:meta,非常有用。

<meta charset=”字符集” /> 用来指定浏览器使用的编码表

 

注意，只要编码与解码时，采用的编码表不一致，就会造成乱码！！

注意，并不是使用utf-8就“万事大吉” 而是要保证，编码与解码时的码表一致才行！！！

 

利用meta，定时刷新页面

<meta http-equiv="refresh" content="1;url=\'http://www.163.com\'" />

表示，过1秒，刷新到163首页。

 

 

Title: 你懂得  <head><title>哈哈</title></head>

 

  1. 排版标记

<!--   --> 注释。

p: 段落标记，段落标记会自动换2行

属性

解释

align

控制段落中的内容的水平对齐方式

title

鼠标悬停在段落上的提示文字

 

 

 

 

 

 

strong：

em

U

del

 

 

sub

sup

 

h1...h6

 

 

ol li （order list    list item）

 

注意，li必须用在ol里面

 

ul li  (unorder list    list item)

 

dl dt dd  (data list   data type  data describe)

 

marquee: 滚动标记

属性名

解释

scrollamount

滚动距离间隔

Scrolldelay

滚动时间间隔

loop

控制循环次数

bgcolor

控制背景颜色

direction

控制滚动方向  left right up down

width height

控制marquee的高宽

Behavior

控制滚动方式

   Scroll  循环滚动

   Slide   只滚动一次，且保留内容

   Alternate 来回滚动

 

 

img

A

bgsound

video

table tr td

form

Input

select

textarea

frameset

frame

iframe

 

 

 

  • TAG：
上一篇：html CSS的简单学习(3) 下一篇：5.11 HTML基础知识点
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！