HTML第一天-CSDN博客

本文链接：https://blog.csdn.net/w1804538872/article/details/80980845

HTML day01

第一天:

HTML,结构

常用标签

一.HTML

1. 超文本标记语言

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

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

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

2. html文件的后缀

html 或 htm

3.HTML文档结构

<!DOCTYPE html>
<html lang="en">
<head>      
    <metacharset="UTF-8">
    <title>标题</title>
</head>
<body>      
    欢迎━(*｀∀´*)ノ亻!大家来到HTML页面
</body>
</html>

二.常用标签

1. 多媒体标签

音频<audio></audio>

视频<video></video>

2. 超链接

<a href="https://www.baidu.com" target="_top">百度一下,你就知道</a>

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

Target:设置打开链接的方式

     _self 在本页面打开

     _blank 在新页面打开

     _top 回到顶部再打开

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

功能:

1. 链接到目标地址

2. 锚点:导航效果

(1)设置锚点

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

 (2)跳转到锚点

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

3. 功能性的连接:比如发送邮件

<a href=＂功能关键字＂></a>

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

3.

４.跑马灯效果

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

Bgcolor:背景颜色

Direction:滚动方向

Behavior:滚动方式

     Scroll:循环滚动

     Alternate:交替滚动

     Slide:滚动单次

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

Loop:滚动次数

5.图片

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

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

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

  路径:相对,绝对

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

  /:同级

  ../:上级

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

6.表单

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

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

Action:提交数据的得知

 Method:提交的方法

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

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

     提交形式:

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

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

7.输入框

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

<input type=”输入框的类型”>

Type=”text” 文本输入框

Type=”password” 密码输入框

Type=”button”点击按钮

Type=”checkbox”复选

Type=”radio”单选

Type=”hidden”隐藏:传值

Type=”file”文件

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

Type=”submit”提交

Type=”date”时间

下拉多选框

</select>

多行文本域

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

输入框中的属性

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

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

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

checked=”checked” 默认选中

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

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

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

8.页面区域布局标签

(1)Div

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

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

(2)ul和li

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

9.总结标签

(1)行级标签

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

2.不能设置行级标签的宽高(区域)

3.比如<a> <input> <span>

(2)块级标签

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

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

3.比如:div,ul,li,p

(3)行内块标签

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

2.可设置标签的宽高

3.比如:img,marquee

结束总结

1. HTML的认识和结构

2. 常用标签

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

作业

1.7个标签,熟练使用

2.布局京东区域

3.选择:页面