HTML5（简易上手）
HTML
-
Hyper Text Markup Language（超文本标记语言）
<!-- DOCTYPE声明:告诉浏览器需要使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!-- head标签代表网页头部 --> <head> <!-- meta描述性标签，用来描述网站的一些信息 --> <meta charset="UTF-8"> <!-- meta一般用来做SEO --> <meta name="keywords" content="Neo_new_world"> <meta name="description" content="hello Neo, welcome to new world"> <!-- title网页标签 --> <title>我自己的爱达荷</title> </head> <body> hello world! </body> </html>- 简单的进行网页构建，分别通过声明DOCTYPE告诉浏览器使用规格
- meta 描述网页内部信息
- title 制定网页抬头信息
- body 显示在网页上的信息
基本标签使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<!--标题标签-->
<H1>一级标签</H1>
<H2>二级标签</H2>
<H3>三级标签</H3>
<H4>四级标签</H4>
<!--段落标签-->
<p>1，所有的痛苦都可以摧毁人，但苦难的人也可以摧毁痛苦。</p>
<p>2，逆境是通往真理的道路。</p>
<p>3，今天我不是我的过去。</p>
<p>4，是要赢得世界，还是要失去它。这是一个无聊的世界。</p>
<p>5，去!这是行动的时候，个人是什么，只要代表着光辉的过去，火的火花就可以传给子孙后代，永远不会出去。</p>
<!--水平线标签-->
<HR>
<!--转行标签-->
1，所有的痛苦都可以摧毁人，但苦难的人也可以摧毁痛苦。<br/>
2，逆境是通往真理的道路。<br/>
3，今天我不是我的过去。<br/>
4，是要赢得世界，还是要失去它。这是一个无聊的世界。<br/>
5，去!这是行动的时候，个人是什么，只要代表着光辉的过去，火的火花就可以传给子孙后代，永远不会出去。<br/>
<!--粗体,斜体-->
<H1>字体样式标签</H1>
粗体： <STRONG>I Love You</STRONG> <br/>
斜体： <EM>I LIKE YOU</EM>
<br/>
<!--特殊符号-->
空 格 <br/>
> 小于 <br/>
< 大于 <br/>
©版权所有者neo
<!--
特殊符号记忆方式：
特殊符号以&为开始，;为结束
-->
</body>
</html>
-
多级标签
-
段落标签
-
水平线标签
-
转行标签
-
粗体/斜体字符
-
特殊符号
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--img学习
src：图片地址，相对路径，绝对路径
-->
<img src="./resources/images/bainian.png" alt="百年孤独" title="百年的孤独" width="800" height="600">
</body>
</html>
- 设置图像标签，需要相对路径或绝对路径（图片文件最好单独保存在一个文件夹中）
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--使用name作为标记-->
<a name="TOP">顶部</a> <br/>
<!--a标签
href：必填，表示要跳转到链接所指页面
target : 表示窗口要在哪里打开
_blank 在新标签中打开
_self 在自己的网页打开
-->
<a href="./基本标签学习.html" target="_blank">点击我跳转到
<img src="./resources/images/bainian.png" alt="百年孤独" title="百年的孤独" width="800" height="600">
</a> <br/>
<a href="https://baidu.com" target="_self">点击我跳转到百度</a>
<P><img src="./resources/images/bainian.png" alt="百年孤独" title="百年的孤独" width="800" height="600">
</a> <br/></P>
<P><img src="./resources/images/bainian.png" alt="百年孤独" title="百年的孤独" width="800" height="600">
</a> <br/></P>
<P><img src="./resources/images/bainian.png" alt="百年孤独" title="百年的孤独" width="800" height="600">
</a> <br/></P>
<!--锚链接-->
<a href="#TOP" >回到顶部</a>
<!--功能性链接
邮件链接：mailto：
-->
<a href="mailto:xxx@qq.com">点击联系我
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2020306057&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:2020306057:51" alt="hello Neo，welcome to new world" title="hello Neo，welcome to new world"/></a>
<br/>
<a name="down">down</a>
</body>
</html>
块元素
- 无论内容多少，该元素独占一行
- （p, h1-h6…）
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- （a, strong, em …）
列表学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>python</li>
<li>javascript</li>
<li>hacker</li>
<li>运维</li>
<li>金融</li>
</ol>
<hr>
<!--无序列表-->
<ul>
<li>绘画</li>
<li>健身</li>
<li>读书</li>
<li>摩托车</li>
<li>约会</li>
</ul>
<hr>
<!--自定义列表
dl：标签
dt：列表名称
dd: 列表内容
-->
<dl>
<dt>电影清单</dt>
<dd>重庆森林</dd>
<dd>我自己的爱达荷</dd>
<dd>请以你的名字呼唤我</dd>
<dd>黑客帝国</dd>
<dd>乱世佳人</dd>
</dl>
</body>
</html>
- 有序列表
- 无序列表
- 自定义列表
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table List</title>
</head>
<body>
<!--表格table
行： tr
列： td
border: 增加表框属性
-->
<table border="1px">
<tr>
<!-- colspan 跨列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!-- rowspan 跨行-->
<td rowspan="2">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>
</tr>
</table>
</body>
</html>
- 表格 / 表格属性
- 跨行，跨列
媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--嵌入式媒体-->
<iframe src="//player.bilibili.com/player.html?aid=69931216&bvid=BV1NE411X7cN&cid=121199986&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<br/>
<!--音频和视频
src:资源路径
controls：控制条
autoplay：自动播放
-->
<video src="/home/neo/PycharmProjects/personal_studies/HTML/resources/video/wind.flv" controls autoplay></video>
<br/>
<audio src="HTML/resources/audio/小清新情歌.mp3" controls autoplay></audio>
</body>
</html>
- 嵌入式媒体 iframe
- 音频 video / audio
页面结构分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<!--网页的整体-->
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
- header : 网页头部
- section： 网页主体
- footer：网页脚部
get和post表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action ： 表单提交的位置，可以是网站，也可以是一个请求处理的地址
method ： post，get 提交方式
get提交：可以在url中看到提交的信息，不安全，但是高效
post： 比较安全，传输大文件
-->
<form action="./页面结构分析.html" method="get">
<!-- 文本输入框：input type=“text”
value="NEO" maxlength="8" size="30" readonly required
默认初始值 输入字符限制 框格大小 只读属性 不能为空行-->
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required > </p>
<!--密码框：input type=“password” -->
<p>密码：<input type="password" name="password"></p>
<!--单选框标签
input type="radio"
value: 单选框的值
name：表示组 (只有在同一个组中才能单选)
disabled ：禁用输入
-->
<p>性别：
<input type="radio" value="boy" name="sex" checked disabled/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框
input type=“checkbox”
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby"> 睡觉
<input type="checkbox" value="code" name="hobby"> 代码
<input type="checkbox" value="paint" name="hobby"> 画画
<input type="checkbox" value="coffee" name="hobby"> 咖啡
<input type="checkbox" value="game" name="hobby"> 游戏
</p>
<!--按钮
button: 普通按钮
image： 图像跳转按钮
submit： 提交按钮
reset： 重置按钮
-->
<p>按钮：
<input type="button" name="btn01" value="点击变强">
<input type="image" src="./resources/images/bainian.png" height="300" width="400">
</p>
<!--下拉框，列表框
hidden：隐藏选项
-->
<p>下拉框：
<select name="列表名称">
<option value="选项值" hidden>中国</option>
<option value="选项值">美国</option>
<option value="选项值">瑞士</option>
<option value="选项值">印度</option>
<option value="选项值">法国</option>
</select>
</p>
<!--文本域
-->
<p>反馈:
<textarea name="textarea" cols="100" rows="30">请输入反馈内容</textarea>
</p>
<!--文件域
input type="file" name="files"
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--邮件验证
pattern： 设置邮箱所要求的格式
-->
<p>邮件:
<input type="email" name="email" pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
</p>
<!--url验证-->
<p>URL:
<input type="url" name="url">
</p>
<!--数字验证-->
<p>数字:
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!--滑块-->
<p>音量:
<input type="range" name="voice" max="100" min="0" step="2">
</p>
<!--搜索框-->
<p>搜索:
<input type="search" name="search">
</p>
<!--增强鼠标可用性-->
<p>
<label for="mark">点击试一试</label>
<input type="text" id="mark">
</p>
<p>
<!-- 提交表单按钮 -->
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
- 文本输入框
- 密码框
- 提交表单
- 增强鼠标可用性
- 滑块
- 搜索框
- 邮箱验证
- URL验证
- 数字验证
- 文件域
- 文本域
- 下拉框
- 多选框
- 单选框
3585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
