html中的基本标签

a标签

注意点

  • a标签必须有一个herf属性,制定一个网页跳转到另一个网页。
  • herf属性的网页URL必须加上http:// 或者 https://
在网页显示的文字或者是图片

百度一下
"

控制是否跳转到一个新的页面
属性:

  • target
    一个是_self (默认),另一个是_blank
    其中“_self”是调转到当前页面,“_blank”是跳转到新的页面。
    格式: target" _self"
  • title
    作用是控制鼠标悬停时显示的内容。
    格式:title" xxx"

base标签

作用:base标签专门用来统一指定网页中当前所以的a标签超链接如何打开
注意点:base标签必须写在head标签内部,格式为
.

假链接

假链接的两种

  • JavaScript:
    两者的区别:# 会自动回到网页的顶部,但是 JavaScript:不会自动回到顶部。

锚点

要想通过a标签跳转到指定位置,那么必须告诉目标标签一个独一二的id。
步骤
1.给目标的标签添加一个id属性,并且添加一个独一无二的值。
2.给a标签的herf属性中写上#+id(id就是目标属性的id值)

我是顶部

跳转到中部









我是中部

调转到底部







我是底部


列表标签

无序列表

无序列表表示没有先后之分,列表是一个整体。
格式为:

  • 需要显示的列表条目

eg:

中国的城市


  • 北京
  • 上海
  • 广州
  • 西安

物品清单

  • 蔬菜

    • 白菜
    • 萝卜
    • 黄瓜
  • 水果

    • 苹果
    • 桃子
    • 香蕉

有序列表

有序列表:所有的数据都是有序的
格式:

ol有type属性,列表的排列目录。即1,2,3或者a,b,c等
其他与无序列表大同小异

定义列表

定义列表的应用场景:

  • 做网页的尾部信息
  • 做图文混排
    格式:
中间写的是事物
中间写的是描述
(img/QRcode.jpg )

我的头像



表格标签

目的:给数据添加表格语义
格式:

                           整个表格
                              一行
           一行的一个单元格
    
需要显示的内容

注意点:border默认为零,因此不显示。故要设置成1.
表格的属性:

  • 宽度和高度
    可以给table和td标签使用。
    默认是按照内容来自动设定的,也可以给table设置width或者height属性。给td设置width或者height属性时候,总宽度或者高度不变。
  • 水平对其和垂直对其
    其中,水平对其能给table和tr和td标签使用,垂直对其只能给tr和td使用。
    水平对齐是设置align属性,垂直对其是valign 格式为align="center/left/right". valign="top/bottom".
  • 外边距和内边距属性
    只能给table使用。
    外边距是单元格与单元格之间的距离,默认情况下的外边距是2。 格式为 cellspacing"20px"
    内边距是单元格与文字之间的距离 默认值是1. 格式为 cellpadding"20px"

eg:写一个表格,2行2列,外边距为0,文字全部居中的一个表格

1.1 2.3
2.1 2.2

细线表格

先给整个表格设置背景颜色为黑色,然后给每个行设置背景颜色为白色,把黑色线条就显示出来了,因为外边距的默认值为2,设置成1,即可。
步骤:
1.给table设置bgcolor和cellspcing
2.给tr设置bgcolor

1.1 1.2
2.1 2.2

表格的其他标签

表格的标题:caption标签,一定要写在table内部才会有效,并且紧跟table后面。

今日小说排行榜

排名 关键词 趋势 今日搜索 最近七日 相关链接
1 暴走大事件 上升 8888 779897 贴吧 图片 百科
1 暴走大事件 上升 8888 779897 贴吧 图片 百科
1 暴走大事件 上升 8888 779897 贴吧 图片 百科
1 暴走大事件 上升 8888 779897 贴吧 图片 百科
1 暴走大事件 上升 8888 779897 贴吧 图片 百科

单元格的合并

  • 水平方向上单元格合并
    可以给td标签添加colspan属性,来指定把一个单元格看做两个。 格式:
    但是这样会多出一个单元格,那么还应该删掉一个单元格,就是删掉一个td
    注意点:单元格一定是向后合并或者向下合并。
  • 垂直方向上单元格合并
    可以给td标签添加rowspan属性,把一个单元格当做两个看待。
    但是这样会在垂直方向上多出一个单元格,还应该删掉一个单元格。


表单标签

表单就是收集用户的信息的。
表单的格式:

<表单元素>
账号:
密码:
姓名:
性别:
喜欢的运动
篮球 足球 乒乓

按钮

普通按钮的type:button
图片按钮的type:image
清空按钮的type:reset
提交按钮的type:submit,其中要想提交至服务器 1.给form添加一个action属性填写地址 2.给需要提交的信息添加name属性。

账号: 密码:

输入框的聚焦

上次说的有一些不足之处,点账号,账号输入框不会聚焦,同理,密码输入框也不会聚焦。怎么实现聚焦呢?
就要使用label标签。
有两种方法。

  • 1.将文字用label标签包裹
    2.给input添加一个id属性。
    3.用label的for属性与id绑定(官方推荐)
    格式就是:
  • 直接将文字和所绑定的输入框用label标签包裹。
    局限性:不能实现账号与密码输入框聚焦。
    格式就是:
账号:
密码:






待选框

给输入框添加待选内容
1.有一个输入框
2.写一个datalist标签,内部写一个option标签,option标签内部输入待选内容。
3.给datalist添加一个 id属性
4.给input标签添加一个list属性,并且与datalist标签的id关联。

请输入你要的车:

    
    
    
    

新增的表单标签

一些固有的格式,这样可以自动校验是否符合格式。

邮箱: 电话: 时间: 颜色: 网址:

练习

注册界面

注册界面

性别:保密
爱好: 篮球 足球 足浴




其他的表单标签(select标签和textarea标签)

1.select标签

1.1作用:用于定义下拉列表
1.2设置默认显示的内容:给option添加selected属性
1.3给下拉列表的内容分类 格式为:

2.textarea标签

2.1作用:定义一个多行输入框
2.2格式:
注意点:cols和rows可以设置行数和列数。但是在网页里面依然可以通过右下角的三角号进行拉伸。





视频和音频标签

视频的第一种形式

格式:

属性:
autoplay:视频默认不会自动播放,因此添加autoplay属性。
controls:控制条
poster:视频没有播放之前显示的展位图片,但是使用这个的时候应该没有autoplay标签的,因为那样会自动播放。
loop:用于广告,不能控制,不能关闭
preload:预加载视频。 如果设置了autoplay属性,那么preload就会自动失效。
muted:设置静音
width:视频的宽度
height:视频的高度



视频的第二种形式

video第二种形式存在的意义:因为五大浏览器厂商都不愿意支持其他浏览器的视频格式,导致了有的视频格式在浏览器上不会播放,
为了解决这个问题,推出了第二中形式。


注意点:浏览器必须支持HTML5标签,否则同样无法播放的。
以后可以通过JS框架实现。


音频

音频和视频是基本上相同的,也是有两种可是的。
video使用的属性基本上可以在audio中使用。功能也基本上差不多。

   1.
   2. 


marquee标签

作用:跑马灯效果
属性:

  1. direction:left/right/up/down
  2. scrollamount 单词是滚动速度的意思: 设置滚动的速度,值越大,速度越快。
  3. loop:设置滚动的次数,默认情况是-1.即无限滚动。
    4.behavior 单词是行为的意思:设置滚动的类型。slide滚动到边界就停止,alternate滚动到边界就自动弹回。
    marquee标签:

跑马灯可以让文字滚动,也可以让图片滚动


    你们好!

你们好!
哎呀我炸你

字符实体标签

字符实体:

  1. 空格: 一个“ ” 是一个空格,多个就是多个空格;
  2. <>在HTML中有特殊的含义,因此不能再网页中直接显示出来
    其中 < 用lr >用bl 分别表示。

3.版权符号 :©

我 爱你

现在我们学习了

等标签

©2017-2018.

html中废弃的标签




加粗文本
u 给文本添加下划线
i 将文本倾斜
s 给文本添加下划线
这些没有语义,就是改变样式,违背了HTML的原则,因此不到万不得已都不使用这些标签。
现在用下列标签替代这些:
strong 代替 b
ins (instead) 代替 u
em (emphasizde) 代替 i
del (deleted) 代替 s

你可能感兴趣的:(html中的基本标签)