html 初级讲解

来源：互联网发布：steam连不上网络编辑：程序博客网时间：2024/05/24 05:54

一：先讲一下架构：这里我们主要学b/s架构

1.b/s架构（browser service）又叫浏览器服务架构.

优势：1.有利于维护

2.方便

3.省钱（开源，免费）

4.开发速度块

2.c/s架构（client service）客户端服务架构

我们常见的有：qq，王者荣耀，lol。。。。

二：页面组成部分主要讲解第一个html；

1.HTML

超文本标记性语言

这里我们文件的命名要用.html或者htm；这里我们建议使用.html结尾；

这里不显示扩展名的，我们要在：

组织=》文件夹搜索与选项-》查看-》隐藏已知文件的扩展名

2.css

就是修饰样式的，层叠样式表；（后面我们会讲到，请继续关注）

3.javascript

后面我们会讲到，请继续关注

三：全局架构标签和一些简单的html标签

标题标签的作用：有利于搜索引擎的抓取。可以堆积关键字。

1. <marquee loop = "2" scrollamount="100" direction = "up"></marquee> 跑马灯效果；

其中属性有：loop ------循环次数 scrollamount -------- 速度 direction -----------方向

2.设置字符集：<meta charset = "utf-8"/>

3.<title>我是标题</title>

注意：这里的设置字符集和标题都要写在<head></head>

<html>
<head>
 <meta charset = "utf-8/>
 <title>李坤真帅</title>
 </head>
 <body>
 在这里写你的代码
 </body>
 </html>

4. 段落标签

特点：独占一行

例子：

<html>
 <head>
 <meta charset = "utf-8"/>
 <title>今天干点啥呢，练习p标签</title>
 </head>

 <body>
 你属猪吗，，我不数组
 </body>
</html>

5. 换行

例子：

<html>
 <head>
 <meta charset = "utf-8"/>
 <title>今天干点啥呢，练习br换行</title>
 </head>

 <body>
 开始的 开始我们都是孩子，最后的最后我们都是老子
 </body>
</html>

6.<blockquote></blockquote> 块引用标签特点：两边有留白；

例子：

<html
 <head>
 <meta charset = "utf-8"/>
 <title>你真帅</title>
 </head>
 <body>
 <blockquote>
 今天天气晴朗，是鬼节，哈哈哈哈啊哈啊哈，房间爱看书的
 罚款交话费啊回复可见啊回复卡发哈客服哈
 </blockquote>
 </body>
</html>

7.<a href="链接地址" title ="ggg" target ="_self"></a>重点超链接

注意：你在写连接的时候要加上协议（http://）

扩展一下我们的协议有那些：HTTP ，FTP文件传输协议，TCP，SMTP邮件传输协议

超链接这里我们有几个属性值：link，alink,vlink,havor;

link:连接默认的颜色

alink：鼠标点击时的颜色

vlink：访问过后的颜色

havor: 经过时候的颜色

href : 连接地址

title :鼠标移上去提示的功能

target打开方式：

-self 默认的在本页面打开。

-blank 在新窗口打开。

8.实体字符： 空格 &nbsp ;

大于号 &gt；

小于号 &lt；

单引号&apos；

版权&copy；

商标&trade；

例子：

<html>
 <head>
 <meta charset = "utf-8"/>
 <title>今天干点啥呢，实体字符</title>
 </head>

 <body>
 这是   什么>几把<万一啊，真©他们™的恶心
 </body>
</html>

9.<pre></pre> 按照原样格式输出

例子：

<html>
 <head>
 <meta charset = "utf-8"/>
 <title>今天干点啥呢，练习p标签</title>
 </head>

 <body>
 <pre>今天很高兴认识大家
 你是真的很帅
 兄弟你的眼光不错啊
 哈哈哈哈啊哈
 谦虚了
 </pre>
 </body>
</html>

10.无序排列和有序排列和自定义排列

a.无序列表：

li你想写多少写多少

</ul>

type：disc 实心圆

circle 空心圆

square 实心的方块

列子：

b.有序列表

li你想写多少写多少

</ol>

列子：

<body>
 <ol>
 <li>hahhah</li>
 <li>gggggg</li>
 <li>eeeeee</li>
 <li>fffffff</li>
 <li>fffff</li>
 </ol>
 </body>

c.自定义列表

<body>
 <dl>
 <dt>你是领头的</dt>
 <dd>你是小跟班</dd>
 <dd>你是小跟班</dd>
 <dd>你是小跟班</dd>
 <dt>你是领头的</dt>
 <dd>你是小跟班</dd>
 <dd>你是小跟班</dd>
 <dd>你是小跟班</dd>
 <dt>你是领头的</dt>
 <dd>你是小跟班</dd>
 <dd>你是小跟班</dd>
 <dd>你是小跟班</dd>
 </dl>
 </body>

11.分隔符：hr;独占一行：

默认的属性有：

width 并没有高

size 控制高度

color 控制颜色

align 默认是居中 center

left

right

center

12.在总结一些常用的标签

标题标签 h1 - h6 特点：独占一行

只有1到6其余的没有任何效果跟普通文字一样

段落标签 p 特点：独占一行

ul li dl dd dt ol 特点：独占一行

strong ，b 加粗特点：共处一行

em ，i 斜体特点：共处一行

u 下划线特点：共处一行

sup 上标特点：共处一行

sub 下标特点：共处一行

12.font 标签设置字体样式

属性有：size 大小； face 样式； color 字体颜色；

13.img 标签图像标签（其中有个图像热点的东西，了解即可） <img/>

属性： width 宽； height ：高； src : 路径； title：提示 alt 图片无法显示的时候会提示

14.视频和音频标签；<vedio></vedio> <audio></audio>

视频：vedio 标签属性有 width 宽 height 高 src 资源 loop 一直循环 autoplay 自动播放 controls 显示控制按钮

音频：audio 标签属性有 src 资源 loop 一直循环 autoplay 自动播放 controls 显示按钮键

15.几秒后调到某个地方

四：body中的属性：

<html>
 <head>
 <meta charset = "utf-8"/>
 <title>今天干点啥呢，练习body中的属性</title>
 </head>
 <body text="#ccc" background ="图片路径" bgcolor = red leftmargin = 200 topmargin = 200>
 text:文字的颜色；
 background =图片路径；
 bgcolor :背景颜色
 leftmargin:距离左边距的距离
 topmargin：距离上边距的距离
 </body>
</html>

五：html的注释：

六：相对路径和绝对路径

根据自己的文件的位置去找对应的资源

如果在它的上一届，需要你先出来 ../出一层 ../../../../ .........

绝对路径：

1、相对于磁盘根目录

2、相对你的网站根目录？？？

例子：

<html>
 <head>
 <meta charset = "utf-8"/>
 <title>今天干点啥呢，相对路径和绝对路劲 </title>
 </head>
 <body background="../../../test/1.png">

上一级上一级上一级中test文件夹中的1.png;

绝对路径：F:/php/img.php

</body>
</html>

六：URL

统一资源定位符

http://www.baidu.com:80/index.php?username=likun&password=123456&sex=nan

组成部分：

1.协议的名字：

http 80 ; ftp :21 ; smtp:25;ssh：22

2.域名：

www.baidu.com;

3.端口号

80可以忽略不写。

端口号的取值范围是：0-65535；其中：0-1024已经被占用；

4.你请求的文件

index.php

5.url携带的参数

问号后面的就是值键=》值

username=likun&password=123456&sex=nan

总结：

ul 标签中的属性有 type -> disc circle square

a 标签中常用属性有：href name(锚点的时候要用到) target ---> _self _blank(在另一个窗口中打开)

font 标签中常用属性有：color face size

p 标签中常用的属性有：align ---> left right center

hr 标签中常用的标签：width size align ---> left right center

caption 表头标签中常用的属性：align ---> left right center

h1 标签中常用的属性： align ---> left right center

img 标签中常用的属性：alt src title width height

li 标签中的属性：type

table 标签中常用的属性： width height border bgcolor bordercolor align cellspacing celldadding

td 标签中常用的属性有： width height align valign bgcolor rowspan colspan

video 标签中常用的属性： loop autoplay controls width height src

audio 标签中常用的属性： loop autoplay controls src

body 标签中常用的属性：     text:文字的颜色；
       background =图片路径；
       bgcolor :背景颜色
       leftmargin:距离左边距的距离
       topmargin：距离上边距的距离

阅读全文

0 0

html 初级讲解

标题标签 h1 - h6 特点：独占一行

段落标签 p 特点：独占一行

ul li dl dd dt ol 特点：独占一行

strong ，b 加粗 特点：共处一行

em ，i 斜体 特点：共处一行

u 下划线 特点：共处一行

sup 上标 特点：共处一行

sub 下标 特点：共处一行

strong ，b 加粗特点：共处一行

em ，i 斜体特点：共处一行

u 下划线特点：共处一行

sup 上标特点：共处一行

sub 下标特点：共处一行