HTML
文章目录
介绍W3C
- World Wide Web Consortium(万维网联盟)
- Web技术领域最权威和最具影响力的国际中立性技术标准机
- http://www.w3.org/
- http://www.chinaw3.org/
W3C标准包括
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
HTML描述
- Hyper Text Markup Language (超文本标记语言)
- 最新版本:HTML5
- 跨平台,几乎所有的知名浏览器都支持使用HTML5
标签学习
HTML的基本标签
<!--DOCTYPE :告诉浏览器所使用的规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta标签:描述性标签,用于网站描述-->
<meta charset="UTF-8">
<!--title标签:网页标题-->
<title>Title</title>
</head>
<!--body标签:代表网页的主体,实现网页的代码就写在body里面-->
<body>
<!--基本标签-->
<!--1.标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--2.段落标签-->
<P>你好</P>
<P>你好呀</P>
<P>我是你爹</P>
<P>什么?</P>
<P>你爹是我啊</P>
<!--3.水平线标签-->
<hr/>
<!--4.换行标签-->
你好<br/>
你好呀<br/>
我是你爹<br/>
什么?<br/>
你爹是我啊<br/>
<!--5.字体样式标签-->
粗体:<strong>java</strong><br/>
斜体:<em>java</em>
<!--6.常用特殊符号标签-->
空 格:空 格<br/>
大于:><br/>
小于:<<br/>
版权:©<br/>
</body>
</html>
<!--此处自行复制查看效果-->
图像标签
<body>
<!--图片标签-->
<!--
src :图片的相对地址或者绝对地址
alt :图片名(自定义)
title :鼠标悬停显示的文字
width :图片的宽度
height :图片的长度
-->
<img src="" alt="" title="" width="" height="">
</body>
超链接标签
<body>
<!--超链接标签-->
<!--href :跳转地址 \ target :表示窗口在哪里打开-->
<a href="" target="">(可以输入文字,也可以嵌套图片等等)</a>
<!--锚链接-->
<!--
1.需要一个锚标记(name)
2.跳转到标记:格式(# + name)
-->
<a name="name">锚标记</a>
<a href="#name">跳转到锚标记位置</a>
<!--还有一些功能性链接-->
</body>
列表标签
<body>
<!--列表-->
<!--1.有序列表-->
<ol>
<li>java</li>
<li>java</li>
<li>java</li>
<li>java</li>
</ol>
<!--2.无序列表-->
<ul>
<li>java</li>
<li>java</li>
<li>java</li>
<li>java</li>
</ul>
<!--3.自定义列表-->
<!--dl :标签 \ dt :列表名称 \ dd :列表内容-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>php</dd>
<dd>c</dd>
<dd>c++</dd>
</dl>
</body>
表格标签
<body>
<!--表格-->
<!--border :边框宽度 \ style :样式-->
<table border="1px" style="text-align: center">
<!--tr :行 \ td :列-->
<tr>
<td>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>
<!--rowspan :跨行-->
<td rowspan="2">跨行</td>
</tr>
<tr>
<!--colspan :跨列-->
<td colspan="3">跨列</td>
</tr>
</table>
</body>
视频和音频标签
<body>
<!--视频标签-->
<!--src :资源路径 \ controls :控制条 \ autoplay :自动播放-->
<video src="" controls autoplay>视频</video>
<!--音频标签-->
<!--src :资源路径 \ controls :控制条 \ autoplay :自动播放-->
<audio src="" controls autoplay></audio>
</body>
页面结构分析
元素名 | 描述 |
---|---|
header | 标题头部区域的内容(用于整个页面或页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面中的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
iframe内联框架
- 一个页面里嵌套另一个页面
<body>
<!--内联框架-->
<iframe src="" name="name" width="" height=""></iframe>
<!--可联合超链接标签使用-->
<a href="" target="name">跳转</a>
</body>
表单语法
<body>
<!--表单标签-->
<!--
action :表单提交的位置,可以是网站,也可以是一个请求处理的地址
method :post 和 get 两种提交方式
get :可以在url中看到提交的内容,不安全,但是高效
post :比较安全,且可以传输大型文件
-->
<form action="Html03.html" method="get">
<!--input :搜集用户信息 根据type的不同类型,提供不同的样式-->
<p>名字:<input type="text" name="username"></p>
<p>密码:<input type="password" name="pwd"></p>
<!--按钮-->
<p>
<!--submit :提交按钮 \ reset :重置按钮-->
<input type="submit">
<input type="reset">
</p>
<!--自定义按钮-->
<p>
<input type="button" name="btn1" value="submit">
<input type="image" src="" value="" name="btn2">
</p>
<!--单选-->
<p>
性别:
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="gitl" name="sex">女
</p>
<!--多选框标-->
<p>
爱好:
<input type="checkbox" value="girl" name="hobby">女孩
<input type="checkbox" value="boy" name="hobby">男孩
<input type="checkbox" value="gay" name="hobby" checked>gay
</p>
<!--文件域-->
<p>
上传文件:
<input type="file" name="file">
</p>
<!--邮箱验证-->
<p>
邮箱验证:
<input type="email" name="emails">
</p>
<!--URL-->
<p>
URL:
<input type="url" name="url">
</p>
<!--数字-->
<p>
数字:
<input type="number" name="number" max="100" min="0" step="1">
</p>
<!--滑块-->
<p>
滑块:
<input type="range" name="range" max="100" min="0" step="10">
</p>
<!--搜索框-->
<p>
搜索:
<input type="search" name="search">
</p>
<!--下拉框-->
<p>
下拉框:
<select name="contry">
<option value="1">中国</option>
<option value="2">日本</option>
<option value="3" selected>瑞士</option>
<option value="4">印度</option>
</select>
</p>
<!--文本域-->
<p>
<textarea name="textarea" cols="50" rows="20">文本域</textarea>
</p>
</form>
</body>
表单元素
属性 | 说明 |
---|---|
type | 指定元素的类型,text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text |
name | 指定表单元素名称 |
value | 元素的初始值,type为radio是必须指定一个值 |
size | 指定表单元素的初始宽度,当tpye为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位 |
maxlength | tpye为text或password时,输入的最大字符数 |
checked | type为radio或checkbox时,指定按钮是否是被选中 |
表单的应用
- 隐藏域 : hidden
- 只读 : readonly
- 禁用 : disabled
<!--增强鼠标可用性-->
<p>
<label for="mark">文本</label>
<input type="text" id="mark">
</p>
表单初级验证
- 提示信息 : placeholder
- 元素不能为空 : required
- 正则表达式 : pattern
此文章为“奋进的叻叻”巩固HTML的笔记,CSS可能不会进行写文章记录,因为内容较多且杂。
若有不足的地方请多多指教!
参照视频:https://www.bilibili.com/video/BV1x4411V75C?p=19