01_HTML5_标签

标签

DOCTYPE声明

文档类型声明

<!DOCTYPE html>

HTML标签

定义html文档

<html></html>

head标签

双标签 头

<head></head>

body标签

双标签 文档的主体

<body></body>

title标签

双标签 文档的标题

<title></title>

meta标签

单标签 描述网页文档的属性、关键词等。
charset=“utf-8”表示使用的是utf-8编码格式 (gbk也是)

<meta charset="utf-8">

标题标签

一级标题 ~ 六级标题

<h1>~<h6>

双标签

	<h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>

快速生成6个标题标签h$*6

标题标签位置摆放

标签里面添加属性:align=“left | center | right” 默认居左

段落标签

双标签

<p></p>

换行

单标签

另起一行

<br>
<br />

水平线

单标签

<hr>

属性: color 水平线的颜色
width 水平线的长度 (px)
size 水平线的高度 (px)
align 水平线的对齐方式

图片标签

单标签

<img src="" alt="" title="" width="" height="">

属性: src 路径,图片地址
alt 图像文本(无法显示是出现)
title 鼠标悬停提示(一两秒)
width 宽
height 高

路径信息

绝对路径

电脑上储存的访问的地址

E:\自学全栈\源码\02_IMG

img标签引用

相对路径

相对的关系

子级关系:/
父级关系:…/
同级关系:./ (一般省略)

网络路经

具体的网络的路径

超文本链接

双标签

<a href=""></a>

标签里面可以是 字 词 图片
点击跳转到 新的地方 或者 本网页的某个地方
属性:href 默认情况下未访问为 蓝色带有下划线
鼠标点击显示为 红色带有下划线

文本标签

<em>着重
<b>粗体
<i>斜体
<strong>加重语气
<del>删除字
<span>无特定含义

有序列表

<ol>
	<li>第一行</li>
	<li>第二行</li>
</ol>

type属性

  1. 1 代表1,2,3,4
  2. a 代表a,b,c,d
  3. A 代表A,B,C,D
  4. i 代表i,ii,iii,iiii
  5. l 代表l,ll,lll,llll

有序列表的嵌套,列表是可以嵌套的

无序列表

全是小黑点

<ul>
	<li>第一行</li>
	<li>第二行</li>
</ul>

type属性

  • disc 默认空心圆
  • circle 空心圆
  • square 小方块
  • none 不显示

无序列表的嵌套,列表是可以嵌套的

绝大部分导航栏都是无序列表实现的(css)

快速生成ul布局:ul>li*6

表格

表格标签

表格:<table>
行:<tr>
列:<td>
都是双标签

快速生成表格:table>tr*4>td*2{666666}

表格属性

  1. border:表格边框(设置到table身上,border=“1”)
  2. width:表格宽度 (px)
  3. height:表格高度 (px)

单元格合并

  • colspan 水平合并(保左删右)
  • rowspan 垂直合并(保上删下)

Form表单

登录、注册之类的
表单是个容器,用来承载里面的内容,比如输入框、按钮之类的

<form action="" name="" method="get | post"></form>

属性说明
action服务器的地址
name表单名称
method数据提交方式get和post区别
get用于提交少量数据,post用于提交大量数据
get可以看到url,post不能

表单属性

    <form action="" >
        <input type="text">  	 输入框
        <input type="submit">  提交按钮
    </form>
<form>
        用户名:<input type="text" name="username"> <br>  文本框
        密  码:<input type="password" name="pwd">  密码
        <input type="submit" value="提交">  (value属性绝对名字)
    </form>

块元素和行内元素(内联元素)

内容模型

内联元素与块级元素

块级元素内联元素
块元素会在页面中独占一行(自上向下垂直排列)行内元素不会独占页面的一样,之战自身的大小
可以设置width、height属性不可设置width、height属性
一般块级元素可以包含行级元素及其他块级元素一般内联元素包含内联元素不包含块级元素

常见块级元素

div、form、h1~h6、hr、p、table、ul等

常见内联元素

a、b、em、i、span、strong等

行内块级元素(不换行,能够识别宽高)

button、img、input等

新增标签

语义化标签

<header></header> 头部
<nav></nav> 导航
<article></article> 独立完整相关内容块
<section></section> 章节、页眉、页脚
<aside></aside> 侧边栏
<footer></footer> 脚部

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值