HTML01

最新推荐文章于 2023-04-14 11:14:32 发布

wegame520

最新推荐文章于 2023-04-14 11:14:32 发布

阅读量206

点赞数

本文链接：https://blog.csdn.net/wegame520/article/details/80984892

版权

常用标签

一.HTML

1.超文本标记语言

超文本:既有文本的特性,也有超越文本的特性;

比如:插入图片,多媒体等.

标记:由标签组成,不同标签的有不同展示效果或功能.

1.html文件的后缀

.html 或 htm

1.HTML文档结构

<!DOCTYPE html> 
<html lang="en"> 
<head>      
    <metacharset="UTF-8"> 
    <title>标题</title> 
</head>
<body>      
    欢迎! 大家来到HTML页面!
</body>
</html>

二.常用标签

1.多媒体标签

音频:<audio></audio>

视频:<video></video>

1.超链接

href:要打开的链接地址路径

target:设置打开链接方式

_self 在本页面打开

_blank 在新页面打开

_top回到顶部,打开

new和_blank类似 :在新页面打开

功能:

1.链接到目标地址;

1.锚点:导航效果

(1)设置锚点

               <a name="toTop"></a>

(2)跳转到锚点

                               <a href="#toTop">置顶</a>

1.功能性链接:比如发送邮件

        <a href="mailto:zhong@qq.com">发送邮件给:zhong@qq.com</a>

3.跑马灯效果

<marquee width="200px" heigth="200px"
         bgcolor="red" direction="right"
    behavior="scroll" scrolldelay="100"
>欢迎!各位颜值巨高的同学,来到1807-2!</marquee>

Bgcolor:背景颜色

Direction:滚动方向

Behavior:滚动方式;

           Scroll:循环滚动

           Alternate:交替滚动

           Slide:滚动单次

Scrolldelay:滚动速度,数值越大,速度越慢.

Loop:滚动次数

2.图片

<img/>

<img alt="图片无法加载显示的文字"
     title="这是一张图片" src="../image.png">

Alt:       图片无法加载显示的文字

Title:    鼠标放在图片上的提示信息

路径:相对,绝对;

相对路径:以本文件为起点,找到目标文件的路径;

./:同级

../:上级

绝对路径:从电脑盘符开始,到目标文件的路径.

5.表单

form表单:提交页面中表单的数据

<form action="提交数据的地址" method="post">    
</form>

Action:提交数据的地址

Method:提交的方法

Post:利用消息体传输数据.更安全,不可见.数量级更大.

Get:默认get;提交的数据利用url地址传输,数据是可见.,字符串大小不能超过2k;效率更快

提交形式:

服务器地址/功能?name=值1 & name=值2...

https://www.baidu.com/s?wd=你好,form

6.输入框

<input> 输入框,默认是文本输入框

输入框类型:10个

Type=”text” 是文本输入框

Type=”password” 密码输入框

Type=”button” 点击按钮

Type=”checkbox” 复选

Type=”radio” 单选

Type=”hidden” 隐藏:传值

Type=”file” 文件

Type=”reset” 重置form标签中的输入框

Type=”submit” 提交

Type=”date” 时间

下拉多选框

<select>--下拉框

<option>深圳</option>--选项

</select>

多行文本域

<textareacols=”列数” rows=”行数”></textarea>

输入框中的属性设置:

name="sex":通过name获取input中的值

value="id=2":定义input中的值

placeholder="请输入账户!":提示符

checked="checked":默认选中

readonly="readonly":只读,不能输入,可传输

disabled="disabled":禁止,不能输入,不能传输数据

selected="selected":默认下拉框选中

7.页面区域布局标签

(1) Div

盒子,定义页面中的一块区域;

特点:页面布局灵活,常用布局方式;

(2) ul和li

上下级关系,设置ul和li上下级区域

8.总结标签

(1) 行级标签

① 不会占用整行,不会换行排列.多个行级标签排列在同一行.

② 不能设置行级标签的宽高(区域);

③ 比如:<a><input><span>

(2) 块级标签

① 会独占整行,换行排列.多个块级标签是上下排列;

② 可设置块级标签的宽高.

③ 比如:div,ul,li,p

(3) 行内块标签

① 不会占用整行,不会换行排列.多个行级标签排列在同一行.

② 可设置标签的宽高.

③ 比如:img,marquee.

结束总结:

1.HTML的认识和结构

2.常用标签.

1.页面布局,把标签组合到布局区域中.

wegame520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML01

常用标签一.HTML1.超文本标记语言超文本:既有文本的特性,也有超越文本的特性;比如:插入图片,多媒体等.标记:由标签组成,不同标签的有不同展示效果或功能.1.html文件的后缀 .html 或 htm1.HTML文档结构&lt;!DOCTYPE html&gt; &lt;!-- 声明文档类型:HTML5 --&gt;&lt;html lang="en"&gt; &lt;!-- html...
复制链接

扫一扫