html5

最新推荐文章于 2022-10-13 13:25:04 发布

柳LL

最新推荐文章于 2022-10-13 13:25:04 发布

阅读量346

点赞数

本文链接：https://blog.csdn.net/yllmyl/article/details/80952959

版权

一、

1、格式标签：

    示例——定义一段联系信息
    <body>
<address>
          地址信息
</address>

</body>

2、文本格式化标签

块级元素和行内元素的不同

a、块级元素独占一行，行内元素在同一行显示

b、块级元素默认宽度100%，行内元素由内容撑开

c、块级元素可以设置宽高，行内元素不可以设置宽高

d、块级元素可以设置margin和padding 和四个方向，行内元素只可以设置margin和padding和左右值，上下不起作用

e、块级元素默认元素的display为black，行内元素的display为inline.

f、块级元素包括块级元素和行内元素，行内元素一般只包含行内元素和文本

g、常见的块级元素有h1-h6,p,div,hr水平线,ul,ol,li,dl,dt,dd,table等，行内元素有img,a,b加粗,i倾斜,u下划线s删除,em倾斜显示 ,strong加粗显示,sup上标,sub下标

small 小号字体
big 大号字体
s 删除线
del 删除线
ins 插入

3.HTML的属性
语法：开始标签里面属性="属性值"
多个属性空格隔开

4.h1-h6,p 都有align属性和title属性

h1-h6
一号字体最大
六号最小
align 水平对齐方式取值 left right center
title 鼠标悬停给予提示

6.段落元素
p
align 水平对齐方式取值 left right center
title 鼠标悬停给予提示

7.强制换行
br 没有任何属性
5.<img src="" alt="" title=""/>
src:路径
相对路径
同一等级直接写
下一级 /
上一级 ../
绝对路径

alt:当图片不能正常显示的时候，给予提示
title：当鼠标悬停时给予提示

-->
<!--<h1>一号标题</h1>

<!--
1.强制换行
<br/>
没有任何属性

2.水平线
<hr/>
块级元素

color:颜色
size：线的高度
width:线的长度
align:默认值为center

3.超链接
<a></a>
双标记，行内元素

href 路径
target 跳转窗口
默认值 _self 原窗口打开
_blank 新窗口打开

空链接
href="#"
返回网页顶部

锚点：
1.点击a跳转到a
<a href="#name">点击</a>
<a href="" name="name">跳转到</a>

2.点击a跳转到div
<a href="#name">点击</a>
<div id="name">跳转到</div>

<a href="#">空链接</a>

<a href="http://www.baidu.com" target="_blank" >跳转到百度</a>
<a href="05HTML常用标签.html">相对路径</a>

<a href="#text">点击我（标题）</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="" name="text">跳转到我</a>

<a href="#">空链接（跳转到网页顶部）</a>

9.水平线
<hr align="水平对齐方式" size="宽度" width="长度" color="颜色"/>

<hr width="500"/>
<hr width="50%"/>

表格

三行三列

table>tr*3>td*3

表格行的常用属性
表格是按行和列（单元格）组成的，一个表格有几行组成就要有几个行标签<tr>

合并单元格
	横着合并 colspan
	竖着合并 rowspan
	属性写在开始的td上面
	横着合并删除自己的td
	竖着合并删除下面的td

Iframe（Inner Frame）内联框架
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。iframe是属于内联框架，它是body的子级，和body是父子关系。iframe作为一个普通元素放在body里

属性
①width 可设置内联框架的宽
②height 可设置内联框架的高
③name 设置框架名称
④src 设置页面的路径
⑤scrolling规定是否在 iframe 中显示滚动条（yes，no，auto）
⑥ frameborder规定是否显示框架周围的边框（1默认有边框,0）

from表单标签块元素三个属性

作用：提交数据的功能

语法：<from action = "提交地址" name="表单名称自定义" method="提交的方法get/post"></from>

get 不安全提交的信息会在地址栏显示

提交的数据有限制不能大于1kb

post 安全理论上对数据没有限制

input属性：

name 表单名称
value 当前值

checked 默认被选中（配合单选按钮和多选按钮使用）
selected 默认显示（配合option使用）

disabled 禁用
readonly 只读

size select显示的数量

<form action="提交的地址" name="表单的名称" method="提交的方式get|post" enctype="multipart/form-data">
<input type="text"/>文本
<input type="password"/>密码
<input type="radio" name=""/
<input type="checkbox"/>框
<input type="file"/>
<input type="hidden"/>隐藏
<input type="submit"/>提交
<input type="reset"/>重置
<input type="button" value=""/>内容用value 值来改
<button>提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

<input type="image" src=""/>图片引入

邮箱：<input type="email" name="email"/>

电话：<input type = "tel"/>

数字：<input type:'number' min='0' max='100' step='5步长>

范围：（滑块）：<input type="range" min="0" max="100" value="20" step="10"/>

网址：<input type="url 输入网址" name="wz"/>

颜色：<input type=“color”>

日期:<input type="data"/>

月:<input type="month"/>

周:<input type="week"/>

搜索：<input type="search/>

<select name="" id="">
<option value=""></option>
<option value=""></option>
</select>
<select name="" id="">
<optgroup label="标题">
<option value=""></option>
</optgroup>
<optgroup label="名字">
<option value=""></option>
</optgroup>
</select>

<textarea name="" id="" cols="30" rows="10">
多行文本框（文本域）
</textarea>

<fieldset>
<legend>标题</legend>
<input type="text"/>
</fieldset>

</form>

html5新增属性

placeholder 默认提示
required 必填项
autofocus 自动获取焦点
multiple 输入多个，用逗号隔开（配合邮箱和网址使用）
min和max 最小值和最大值
minlength和maxlength 最小长度和最大长度

-->
<form action="">
<p>
姓名： <input type="text" placeholder="请输入您的姓名" name="userName" required autofocus />
</p>
<p>
密码：<input type="password" placeholder="请输入您的密码" name="psd" required minlength="5" maxlength="9"/>
</p>
<p>
邮箱：<input type="email" multiple/>
</p>
<p>
<input type="submit"/>
</p>

</form>

html5新增语义化标签

<title>HTML5新增语义化标签</title>
</head>
<body>

<div>头部</div>
<div>导航</div>
<div>主体</div>
<div>页脚</div>


<header>头部</header>
<nav>导航</nav>
<div>主体</div>
<footer>页脚</footer>

<article>文章，帖子</article>
<section>文章的标题</section>
<aside>侧边栏</aside>

</body>
</html>

音频和视频

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>视频和音频</title>
</head>
<body>
<video src="images/b.mp4" controls poster="images/pic2.jpg" muted>这是一个视频您的浏览器不支持</video>
<video src="images/a.mp4" controls loop width="600" poster="images/pic1.gif">这是一个视频您的浏览器不支持</video>

<audio src="images/a.mp3" autoplay controls loop>这是一个音频您的浏览器不支持</audio>

<video autoplay controls loop>
<source src="images/a.mp4"/>
<source src="images/a.ogg"/>
<source src="images/a.webM"/>
这是一个视频您的浏览器不支持
</video>

<embed src="images/b.mp4"/>
<embed src="images/a.mp3"/>

</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html5新增标签</title>
</head>
<body>

<figure>
<img src="images/pic3.jpeg" alt="" width="300"/>
<figcaption>这是蜡笔小新</figcaption>
</figure>

<dl>
<dt><img src="images/pic3.jpeg" alt="" width="300"/></dt>
<dd>这是蜡笔小新</dd>
</dl>


<details>
<summary>这是标题</summary>
<p>Lorem ipsum dolor sit amet, <mark>consectetur</mark> adipisicing elit. Atque, autem commodi consectetur dolor dolorum eligendi eos eveniet explicabo illo impedit inventore nulla numquam suscipit, tempora tenetur. Aspernatur cupiditate ex iusto!</p>
</details>


<meter min="0" max="100" value="19" low="20" high="80">您的浏览器不支持刻度</meter>


<progress max="100" value="50">您的浏览器不支持进度条</progress>

<input type="text" list="city"/>
<datalist id="city">
<option value="北京"></option>
<option value="河北"></option>
<option value="安徽"></option>
<option value="山东"></option>
</datalist>

<canvas id="myCanvas" width="800" height="800">你的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

</body>
</html>

css 样式还有选择器

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>基础选择器</title>
<link rel="stylesheet" href="css/04style.css"/>
</head>
<body>

<div class="box box1" id="box" style="color: green;">div1</div>
<div>div2</div>
<div>div3</div>

<p class="box">p1</p>
<p>p2</p>
<p>p3</p>

<a href="#">a</a>
<b class="box1">b</b>
<ul>
<li>li</li>
<li>li</li>
</ul>

</body>
</html>

选择器优先级：sytle行内样式>ID选择器>类选择器>元素选择器>通用选择器
权重： 1000 100 10 1

优先级相同的情况下，后面的代码生效

合并选择器逗号链接多个选择器

选择器1,选择器2，。。。{

}
-->
<div class="box box1" id="box" style="color: green;">div1</div>
<div>div2</div>
<div>div3</div>

<p class="box">p1</p>
<p>p2</p>
<p>p3</p>

<a href="#">a</a>
<b class="box1">b</b>
<ul>
<li>li</li>
<li>li</li>
</ul>

</body>
</html>