HTML笔记

HTML

这里是{html}

1、DOCTYPE

文档类型声明
告诉浏览器按当前标准解析代码

2、标签

双标记 封闭类型标记
div,p,a,span
table,tr,td,th
ul,li
body,html,style
单标记 非封闭类型标记
link
img
input
br
meta
hr

3、元素

块级元素和行内元素的区别:
1)块级元素独占一行,行内元素同一行显示
2)块级元素默认宽高为100%,行内元素是有内容撑开
3)块级元素可以设置宽高,行内元素设置宽高不生效
4)块级元素用magin和padding可以设置四周,行内元素只能设置左右
5)块级元素可以包含块级元素和行内元素,行内元素一般不包含块级元素
6)块级元素{div,body,html,table,tr,td,ul,li,p,h1~h6}
7)行内元素{a,s,i,del,video,span,img}

4、图片

<img src="路径" alt="图片不能正常显示给予提示" title="鼠标悬停给予提示">

5、超链接

<a href="路径" target="设置打开的窗口_self|_blank" name="锚点"></a>

6、表格

<table>
    <caption>标题</caption>
    <thead>
        <tr>
            <th colspan="水平合并" rowspan="垂直合并"></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

7、表单

1)作用
提交数据,是页面具有交互性
2)标签

<form action="提交的地址" name="名称" method="提交的方式get|post"></form>

get和post的区别:
①get不安全,提交的数据会在地址栏中显示;post安全
②get只能提交少量的数据,post理论上没有限制
3)表单元素
文本框;

<input type="text">

密码框;

<input type="password">

单选框;

<input type="radio" name="">

多选框;

<input type="checkbox">

提交框;

<input type="submit">

重置框;

<input type="reset">

按钮;

<input type="button">
<button>提交</button>
<button type="reset">重置</button>
<button type="button">没有功能的按钮</button>

文件;

<input type="file">

隐藏域;

<input type="hidden">

图片提交按钮;

<input type="image" src="">

下拉列表;

<select name="" id="">
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
</select>

多行文本框;

<textarea name="" id="" cols="30" rows="10"></textarea>

这个按钮用于提升用户体验;

<label for=""></label>

4)表单元素的属性
name 名称
value 当前值
checked 默认被选中,配合单选按钮和多选按钮使用
selected 默认显示,配合option使用
readonly 只读
disabled 禁用

5)H5新增type类型

<input type="email">
<input type="url">
<input type="search">
<input type="color">
<input type="number">
<input type="range">
<input type="tel">
<input type="date">
<input type="week">
<input type="month">

6)H5新增属性
placeholder="" 默认提示
autofocus 自动获取焦点
required 必填项
multiple 可以输入多个,用逗号隔开,配合邮箱和网址使用
min和max 最小值和最大值,配合数字和范围使用
minlength和maxlength 最小长度和最大长度

8、H5新增语义化布局标签

<header>头部</header>
<nav>导航</nav>
<aside>侧边栏</aside>
<article>文章、帖子、博客等</article>
<section>章节</section>
<footer>页脚</footer>

9、语义化标签

看到标签知道其含义

优点:
1)有利于SEO
2)有利于开发与维护
3)有利于屏幕阅读者去读取

10、视频和音频

1)视频

<video src="" autoplay loop controls muted poster="" width="" height="">您的浏览器不支持视频,请升级</video>

2)音频

<audio src="" autoplay loop controls muted>您的浏览器不支持音频,请升级</audio>

autoplay;自动播放
loop;循环播放
controls;显示控制面板
muted;静音
poster;播放前显示一张图片

11、四大通用属性

11、四大通用属性
除了br,其他元素都有的属性
title 鼠标悬停给予提示
style 行内样式
class 类选择器
id ID选择器

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值