html入门-狂神学java
HTML
CSS
JS JQuery
VUE
HTML
Hyper Text Markup Language 超文本标记语言
审查元素 inspect
html5 + css3
W3C : World Wide Web Consortium 万维网联盟
html注释
<!-- DOCTYPE:告诉浏览器我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
<!-- meta描述性标签 -->
<!-- meta一般用来做SEO -->
<meta charset="UTF-8">
<!-- title网页标题 -->
<title>Title</title>
</head>
<body>
<!-- body标签代表网页主体 -->
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- img学习
src:图片地址(必填)
相对地址，绝对路径
alt:图片名字(必填)
title:鼠标悬停文字
width,height 宽度高度
-->
<img src="../resources/images/IMG_7774.JPG" alt="橘子" title="悬停文字" width="300" height="300">
<a href="urlTag.html#down">回到底部</a>
</body>
</html>
超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UrlTag</title>
</head>
<body>
<a name="top">顶部</a>
<!-- a标签
href:必填,表示跳转到哪个页面
target:表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己网页中打开-->
<a href="imageTag.html" target="_blank">点击跳转到图形</a>
<a href="https://google.com" target="_self">点击跳转到谷歌</a>
<br>
<a href="firstWebPage.html">
<img src="../resources/images/IMG_7774.JPG" alt="橘子" title="悬停文字" width="300" height="300">
</a>
<br>
<!-- 锚链接
1. 需要一个锚标记
2. 跳转到标记-->
<a href="#top">回到顶部</a>
<a name="down">底部</a>
<!-- 功能性链接
邮箱链接:mailto
-->
<a href="mailto:526487053@qq.com">点击联系我</a>
<br>
<!-- qq推广 有点问题-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:qq号:53" alt="王者加我包c" title="王者加我包c"/></a>
</body>
</html>
行内元素和块元素
块元素:无论内容多少，该元素独占一行 (p、h1-h6)
行内元素:内容撑开宽度，左右都是行内元素的可以排在一行 (strong、em)
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>Java</li>
<li>Python</li>
<li>c++</li>
</ol>
<!--无序列表
应用范围:导航、侧边栏-->
<ul>
<li>Java</li>
<li>Python</li>
<li>c++</li>
</ul>
<!--自定义列表
dl: 标签
dt: 列表名称
dd: 列表内容-->
<dr>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>c++</dd>
<dt>位置</dt>
<dd>西安</dd>
<dd>长沙</dd>
<dd>吉林</dd>
</dr>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
</head>
<body>
<!--
row : tr
column : td
cellspacing = 0 实线
-->
<table border="1pt">
<tr>
<!-- colspan 跨列 -->>
<td colspan="4">1-1</td>
</tr>
<tr>
<!-- rowsapn 跨行 -->
<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>Media</title>
</head>
<body>
<!-- 音频和视频
scr ：资源路径
controls ：控制条
autoplay ： 自动播放 -->
<video src="../resource/video/" controls autoplay></video>
<audio src="../resource/audio/" controls autoplay></audio>
</body>
</html>
页面结构分析
header：标题头部区域的内容（用于页面或页面中的一块区域）
footer：标记脚部区域的内容 （用于整个页面或页面的一块区域）
section： Web页面中的一块独立区域
article： 独立的文章内容
aside：相关内容或应用 （常用于侧边栏）
nav：导航类辅助内容
iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe</title>
</head>
<body>
<!-- iframe 内联框架
src：地址
w-h: 宽度高度
-->
<iframe src="https://www.bilibili.com" frameborder="0" width="1000px" height="800px"></iframe>
<a href="firstWebPage.html" target="hello">点击跳转</a>
</body>
</html>
初识表单post和get提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register</title>
</head>
<body>
<!-- 表单form
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post，get提交方式
get 方式提交： 我们在url中能看到我们的提交信息不安全，但高效
post -->
<form action="firstWebPage.html" method="post">
<!-- 文本输入框： input type="text" -->
<p>名字: <input type="text" name="username"></p>
<!-- 密码框： input type="password" -->
<p>密码: <input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
文本框&单选框&按钮&多选框&列表框&文本框&文件域&搜索框&滑块&简单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register</title>
</head>
<body>
<!-- 表单form
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post，get提交方式
get 方式提交： 我们在url中能看到我们的提交信息不安全，但高效
post -->
<form action="firstWebPage.html" method="get">
<!-- 文本输入框： input type="text"
value 默认初识值
maxlength 最长能写几个字符
size 文本框长度
readonly 无法更改
hidden 隐藏
placeholder 提示信息
required 非空判断
pattern 正则表达式-->
<p>名字: <input type="text" name="username" maxlength="8", size="30" placeholder="请输入用户名" required></p>
<!-- 密码框： input type="password" -->
<p>密码: <input type="password" name="pwd"></p>
<!-- 单选框标签
input type="radio"
value : 单选框的值
name : 表示组
checked : 默认
disabled : 禁用-->
<p>性别:
<input type="radio" value="male" name="sex" checked disabled>男
<input type="radio" value="female" name="sex">女
</p>
<!--多选框
input type="checkbox"
input都需要name
checked 默认
-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="game" name="hobby">游戏
<input type="checkbox" value="chat" name="hobby">聊天
</p>
<!--按钮--
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset"> 重置按钮 -->
<p>按钮：
<input type="button" name="btn1" value="点击变长">
<!--图片按钮具有自动提交功能 -->
<input type="image" src="../resources/images/IMG_7774.JPG">
</p>
<!-- 下拉框，列表框-->
<p>下拉框：
<select name="列表名称">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="sweden" selected>瑞士</option>
<option value="india">印度</option>
</select>
</p>
<!-- 文本域 -->
<p>反馈:
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!-- 文件域 -->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--邮件验证-->
<p>邮箱:
<input type="email" name="email">
</p>
<!--URL-->
<p>URL:
<input type="url" name="url">
</p>
<!--number-->
<p>数字:
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!--滑块-->
<p>滑块:
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>搜索:
<input type="search" name="search" id="mark">
</p>
<!-- 增强鼠标可用性-->
<p>
<label for="mark">你点我试试</label>
<input type="text">
</p>
<p>自定义邮箱:
<input type="text" name="diyemail" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
浙公网安备 33010602011771号