html5

最新推荐文章于 2023-04-15 10:02:13 发布

asdwasc

最新推荐文章于 2023-04-15 10:02:13 发布

阅读量61

点赞数

本文链接：https://blog.csdn.net/asdwasc/article/details/116230885

版权

在这里插入图片描述

什么是HTML

Hyper Text Markup Language

超文本标记语言：超文本包括图片，文字，音频视频，动画等等

w3c标准

万维网联盟 World Wide Web Consortium

http：//www。w3.org org结尾代表开源

w3c 标准包括

结构化标准语言 HTML XML

表现 css

行为 DOM　　Javascript

IDE 工具

早期 DreamWeaver

现在 WebStorm

其中IDEA集成了 Webstorm

网页的基本信息

注释 ctrl+/
<! DOCTYPE html> 告诉网页使用什么规范
head代表头部

title代表标题

meta标签,描述性标签,一般用来做seo

格式设置字符集
```
		<meta name = "keywords" content="设置关键字">单闭合标签
		 <meta name = "discription"  content="设置描述信息">   
```
基本标签

快捷键标签字母加tab键

类型开放标签单闭合标签自闭和标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
<!--段落标签p标签-->
<p>测试</p>
<p>测试</p>
<!--换行标签-->
<!--brh和p标签区别,br间距较小,自闭和标签-->
测试 <br/>
测试 <br/>
<!--水平线标签hr-->
<hr/>
<!--字体样式-->
<strong>粗体</strong>
<em>斜体</em>
<br/>
<!--特殊符号-->
空&nbsp;格 &nbsp;
<br>
<h2>特殊符号都是</h2>
&开头 ;结尾
<br>

</body>
</html>

连接标签

<a href="top"></a>
<h2>图像标签包括 图像地址path 图像显示文字 alt   图像鼠标悬停文字title  width 宽高height</h2>
<img src="../resource/img/2.jpg" alt="2" title="绿色图片" width="556" height="300">
<!--a标签学习 href必填,表示跳转到哪个页面-->
<a href="基本标签.html "target="_blank" >超链接标签</a>
<a href="http://baidu.com">超链接标签</a>
<!--图片嵌套到超链接-->
<a href="http://WWW.taobao.com"  target="_blank"> target设置为 blank在新标签打开窗口
    <img src="../resource/img/3.jpg" alt="">
</a>

<!--锚链接-->
<a href="#top">回到顶部</a>
<a href="mailto:1769935880@qq.com">联系我</a>

块元素行内元素

元素独占一行无论内容多少

行内元素 ,一行以内不会换行

列表

<!--有序列表-->
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>
<!--无序列表-->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
<!--    自定义列表-->
    <dl>
        <dt>姓名</dt>
        <dd>wpx</dd>
        <dd>ljt</dd>
        <dd>wjh</dd>
        <dt>年龄</dt>
        <dd>12</dd>
        <dd>12</dd>
        <dd>12</dd>
    </dl>

表格

<table border="1px">
    <tr colspan="4">跨列
        <td rowspan="2">1-1</td>跨行
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

视频和音频

视频 video

音频 audio

controls开启控制台 autoplay 自动播放

页面结构分析

元素名
描述
header
标题头部区域的内容(用于页面或页面中的一块区域)
footer
标记脚部区域的内容(用于整个页面或页面的一块区域)
section
Web页面中的一块独立区域，主体部分
article
独立的文章内容
aside
相关内容或应用（常用于侧边栏)
nav
导航类辅助内容

iframe内敛框架

一个网站里面嵌套另外一个网站

使用方法找到视频的嵌入代码，一般网站会给比如b站

src 写页面地址 name自定义标识名可以通过a标签跳转到这个标识名代表的网页，是在iframe框架中打开，格式为iframe定义的格式，也可以当成一个容器，默认自动加载。一般用于评论框等自己主动加载的地方

<iframe src="" name="baidu" frameborder="0" height="1080" width="1920"></iframe>
<a href="http://www.baidu.com" target="baidu">点击跳转</a>

表单post和get提交

form表单

get不安全不能传输大文件

post比较安全，可以传输大文件

可以注册和登录等

<form action="列表.html"  method="post">
<p>名字:<input type="text" name="username"></p>
<p>密码:<input type="password" name="pwd"></p>
<p>
    <input type="submit">
    <input type="reset">
    
</p>
</form>

单选框标签

TYPE 属性radio 必须有value 否则不显示，然后必须设置到一个组内，name属性需要一样，否则会出现可以选择多个的情况

<form action="列表.html"  method="post">
<p>名字:<input type="text" name="username"></p>
    <p>密码:<input type="password" name="pwd"></p>
    <p>
        性别:
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
<p>
    <input type="submit">
    <input type="reset">
    
</p>
</form>

多选框标签

input type checkbox

参考单选框，能多选

下拉框select

文本域textarea

<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="file" name="files">

表单应用

readonly 只读

disable 禁用

hidden 隐藏域

placehoder 提示信息，用在输入框中

验证方式

常用方式
placeholder提示信息

required非空判断

pattern 正则表达式,去脚本之家可以搜到

asdwasc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5

什么是HTMLHyper Text Markup Language超文本标记语言：超文本包括图片，文字，音频视频，动画等等w3c标准万维网联盟 World Wide Web Consortiumhttp：//www。w3.org org结尾代表开源w3c 标准包括结构化标准语言 HTML XML表现 css行为 DOM　　JavascriptIDE 工具早期 DreamWeaver现在 WebStorm其中IDEA集成了 Webstorm网页的基本信息注释 ...
复制链接

扫一扫