1什么是html?
html是 Hyper Text Markup Language的缩写,译为超文本标记语言,是一种标记语言。
内容扩展:
W3C标准(world wide web consortion)即万维网联盟,成立于1994年,web技术领域最权威和具影响力的国际中立性技术标准机构。
W3C包括:结构化标准语言(HTMLXML)
表现标准语言(CSS)
行为标准语言(DOM,ECMAScript)
2.html代码的格式
如下图所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="这是keywords">
<meta name="description" content="这是description">
<title>MyFirstWeb</title>
</head>
<body>
helle,world
</body>
</html>
DOCTYPE:为文档类型申明 告诉浏览器,我们使用什么规范
html: 总标签 写在<html>和</html>里面才会显示
head: 代表网页头部
meta: 描述型标签 描述网站的一些信息
name="keywords" 后面的content就是搜索用的关键字
title: 网页标题
3.网络的基本标签
关键字
- 标题标签: h1
- 段落标签 p
- 水平线标签 hr
- 换行标签 br
- 字体样式标签 粗体:strong 斜体:em
- 特殊符号 空格: 大于号:&gl 小于号:&tl 版权符:©
7.图片标签 img
<img src="../Resources/images/2048559.jpg" alt="壁纸图" title="悬停文字" width="4000" height="3000">
src: 图片地址 相对地址(推荐使用) 绝对地址
(必填) ../上一级目录
title:悬停文字 把鼠标放图片上会有文字显示
8.链接标签 a
格式:<a href="这里写后缀为html的文件名">点我跳转</a> (也可以把“点我跳转”文字改为图片)
锚链接:1.需要一个锚标记 <a name="top">顶部</a>
2.跳转到标记,用# <a href="#top">回到顶部</a>\
功能性链接,邮件链接:<a href="mailto:xxxx@qq.com">点击联系我</a>
<a name="top">顶部</a>
<!--href:必填,表示要跳转的页面
target:表示窗口在那里打开 _blank:打开一个新网页
-->
<a href="TheFirstWeb.html" target="_blank">点我跳转到第一个网站</a>
<!--点击图片跳转-->
<a href="图像标签.html">
<img src="../Resources/images/2048559.jpg" alt="壁纸图" title="悬停文字"
width="800" height="600">
</a>
<!--用图片来拉长页面测试锚链接-->
<p>
<a href="图像标签.html">
<img src="../Resources/images/2048559.jpg" alt="壁纸图" title="悬停文字"
width="800" height="600">
</a>
</p><p>
<a href="图像标签.html">
<img src="../Resources/images/2048559.jpg" alt="壁纸图" title="悬停文字"
width="800" height="600">
</a>
</p>
<p>
<a href="图像标签.html">
<img src="../Resources/images/2048559.jpg" alt="壁纸图" title="悬停文字"
width="800" height="600">
</a>
</p><p>
<a href="图像标签.html">
<img src="../Resources/images/2048559.jpg" alt="壁纸图" title="悬停文字"
width="800" height="600">
</a>
</p>
<!--锚链接
1.需要一个锚标记
2.跳转到标记,用#号
-->
<a href="#top">回到顶部</a>
<!--功能性连接 邮件连接:mailto-->
<a href="mailto:xxxx@qq.com">点击联系我</a>
9.列表
有序列表<ol><li> 无序列表<ul><li> 自定义列表<dl><dt><dd>
<ol> <ul> <dl>
<li>c</li> <li>c</li> <dt>语言</dt>
<li>c++</li> <li>c++</li> <dd>c/c++</dd>
<li>java</li> <li>java</li> <dd>python</dd>
<li>python</li> <li>python</li> <dd>java</dd>
<li>go</li> <li>go</li>
</ol> </ul> <dt>难易程度</dt>
<dd>易</dd>
<dd>中</dd>
<dd>难</dd>
</dl>
10.表单 <form></from>
action:向何处发送表单,
method:提交的方式
get:我们可以在url中看到我们的账号密码等信息,不够安全,但高效
post:比较安全,可传输大文件,而get不行
value:默认初始值,type为radio时必须要有初始值
maxlength:最长能写几个字符
size:长度
required:不能为空
hidden:隐藏
readonly:只读
checked:默认选中
disable:使该部分不能被使用
placeholder:提示信息
pattern:正则表达式
type="xxx"
xxx:可以写 text textarea radio checkbox button file email number submit reset
文本框 文本域 单选框 多选框 按钮 文件域 邮件 数字 提交 重置
<selection><option> 下拉框
<form action="TheFirstWeb.html" method="post">
<p>名字:<input type="text" name="usename"></p>
<p>密码:<input type="password" name="pwd"></p>
<p>
<!--单选框 value:单选框的值 name:标识组-->
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<!--多选框 checked:默认选择-->
<p>
<input type="checkbox" value="game" name="hobby" checked>游戏
<input type="checkbox" value="code" name="hobby">代码
<input type="checkbox" value="basketball" name="bobby">篮球
</p>
<!-- 按钮-->
<p>
<input type="button" value="这是按钮" name="btn">
</p>
<!-- 下拉框,列表框 select:默认选择-->
<p>下拉框
<select name="Conutry" id="">
<option value="China">中国</option>
<option value="US" selected>美国</option>
<option value="UK">英国</option>
</select>
</p>
<!-- 文本域-->
<p>反馈:
<textarea name="textarea" cols="50" rows="30">文本内容</textarea>
</p>
<!-- 文件域-->
<p>
<input type="file" name="file">
<input type="button" name="upload" value="提交">
</p>
<!-- 邮件验证-->
<p>邮箱:
<input type="email" name="email" >
</p>
<!-- URL-->
<p>URL:
<input type="url" name="url">
</p>
<!-- 数字-->
<p>购买数量
<input type="number" name="数量" max="10" min="0" step="1">
</p>
<!-- 增强鼠标可用性-->
<p>
<label for="mark">点我就到文本框</label>
<input type="text" id="mark">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
11.表格 <table>
行:tr rows
列:td table data cell
colspan:跨列 rowspan:跨行 align=center 居中
<table border="px">
<tr>
<td rowspan="2">跨行</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3">跨列</td>
</tr>
</table>
12.媒体元素
<!--视频和音频-->
<video src="../Resources/video/一念永恒%20第9集.mp4.mp4" controls autoplay></video>
<audio src="../Resources/audio/夏天的风%20-%20火羊瞌睡了.flac" controls></audio>
13.内联框架
src:引用页面地址 name:框架标识名
<iframe src="https://www.baidu.com" name="hello" frameborder="0"></iframe>