提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
一、HTMl是什么？W3C是什么
Hyper Text Markup Language(超文本标记语言) 简写HTML
HTMl通过标签来标记要显示的网页中的各个部分,网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示)
World Wide Wed Consortium(万维网联盟) 简称W3C
W3C是Web技术领域最具权威和具有影响力的中立性奇数标记机构
W3C标准包括:
1.结构化标准语言(HTML,XML)
2.表现标准语言(CSS)
3.行为标准(DOM,ECMASCIPT)
二、HIML怎么使用
1. 网页基本信息
<body>,</body>等成对的标签,分别叫开放标签和闭合标签,单独呈现的标签(空元素),如<hr/>;意为用 “/” 来关闭元素
<!--注释快捷键ctrl+/-->
<!--DOCTYPE 告诉浏览器我们要使用什么规范-->
<!DOCTYPE html>
<!--总标签-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签,他用来描述我们网站的一些信息-->
<!--meta一般用来做SEO(搜索引擎优化)-->
<meta charset="UTF-8">
<!--title网页标签-->
<title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
我的第一个网站
</body>
</html>
2.网页基本标签`
1.<!–标题标签–> <h></h>
<!–标题快捷键 h+ctrl–>
代码如下（示例）：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.
<!–段落标签–> <p></p>
<!–快捷键 p+tab–>
<p>两只老虎 两只老虎</p>
<p>跑地快 跑地快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
3.<!–水平线标签–> <hr/>
<hr/>
4.<!–换行标签–> <br/>
两只老虎 两只老虎<br/>
跑地快 跑地快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
5.<!–粗体和斜体–>
粗体:<strong>/
斜体:<em></em>
<h1>字体样式</h1>
粗体:<strong> i love you</strong>><br/>
斜体:<em> i love you </em>>
<br/>
6.<!–注释和特殊符号–>
空格:
大于:>
小于:<
空格: 空格
<br/>
大于:>
<br/>
小于:<
3 图片标签
<!–图像标签–>
<!–快捷键 img+tab–>
<!–src :图片地址(必填)
相对地址(推荐使用),绝对地址
…/ --上一级目录
alt:图片名字(必填)
–>
先新建一个目录 resources
然后在resources里面新建一个目录image,在把你需要的图片拷贝进去
代码如下
<img src="../resources/image/qq.jpg" alt="桌面图片" title="悬停文字" >
图片效果
4 链接标签
1.页面间链接:从一个页面:跳转到另一个页面
<!-- a标签 快捷键 a+tab
href:(必填)表示我们要跳转的页面,里面填的是一个地址
target:表示窗口在哪里打开
_blank 在新标签窗口打开
_self 在自己的网页中打开
–>
<a href="1.我的第一个网站.html" target="_blank">点击跳转页面</a>
<a href="https://www.baidu.com" target="_self">点击跳转到百度</a>
<br/>
<!--点击图片跳转到相应的网站-->
<a href="1.我的第一个网站.html">
<img src="../resources/image/qq.jpg" alt="网页图片" title="悬停文字"></a>
2.锚链接
<!- -
1.需要一个锚链接标记
2.跳转到标记
\需要使用 # + 跳转的地方(top)
–>
<!--锚链接标记 使用name作为标记-->
<a name="top">顶部</a>
<a href="#top">回到顶部</a>
3.功能性链接
<!–功能性链接
邮件链接:mailto
QQ链接
–>
<a href="mailto:1781613531@qq.com">点击加我邮箱</a>
<br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1781613531&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1781613531:53" alt="你好,加我聊天" title="你好,加我聊天"/></a>
<br/>
5.行内元素 和 块元素
6.列表
1.什么是列表
列表就是信息资源的一种展现形式,它可以使信息结构化和条理化,并以列表的样式显示出来,一遍浏览者能更快的获得相应的信息
2.列表的分类
无序列表
应用范围: 导航,测边栏
<ul>
<li>java</li>
<li>python</li>
<li>c</li>
<li>c++</li>
<li>web</li>
</ul>
有序列表
应用范围:试卷,问答....
<ol>
<li>java</li>
<li>python</li>
<li>c</li>
<li>c++</li>
<li>web</li>
</ol>
自定义列表
dl:标签
dt:列表名称
dd:列表内容
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>c/c++</dd>
<dt>位置</dt>
<dd>上海</dd>
<dd>湖南</dd>
<dd>江苏</dd>
</dl>
7.表格
<!–表格table
行 tr tableRows
列 td tableData
–>
<table border="1px">
<tr>
<!--colspan 跨行-->
<td colspan="3">学生成绩</td>
</tr>
<tr>
<!-- rowspan 跨列-->
<td rowspan="2">吴众杰</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
8.音频和视频
<!–音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
muted:静音
–>
<audio src="../resources/audio/无名.mp3" controls autoplay></audio>
9.页面结构分析
<header>
<h>网页头部</h>
</header>
<footer>
<h>网页脚部</h>
</footer>
<nav><h>导航辅助内容</h></nav>
10.ifrane内联框架
hello 表示一个内联框架,里面规定了长和高
target表示前面网站跳转到哪里打开
<iframe name="hello" frameborder="0" height="800px" width="1400px"></iframe>
<a href="https://baidu.com" target="hello">点击跳转</a>
11.表单 form
<–表单form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get 提交方式
get方式提交,我们可以在url中看到我们提交的信息,不安全,但高效
post:比较安全,可以用来传输大文件
–>
get提交 会显示用户名和密码
post方式 不会在url上面显示出来
<form action="1.我的第一个网站.html" method="get">
<!-- 文本输入框:<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="submit">
<!-- <input type="reset"> 重置 -->
<input type="reset">
</p>
</form>
12.单选框标签 radio
文本输入框: input type =“test”
value=“吴众杰” 默认初始值
maxlength=“8” 文本框最多能写多少字
size=“30” 文本框的长度
checked 默认选择
<form action="1.我的第一个网站.html" method="get">
<p><input type="text" name="username" value="吴众杰" maxlength="8" size="30"></p>
<p><input type="password" name="pwd" size="30"></p>
<!--单选框标签
input type="radio"
value:单选框的值
name:表示组 (单选框标签中name相同,表示同一个组,只能选一个)
(单选框标签中name不同,表示不同的组,每个组中都能选择一个)
-->
<p>性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/ checked>女
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
13.多选框标签 checkbox
<p>爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="game" name="hobby">游戏
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="code" name="hobby">敲代码
</p>
14.按钮 button
<!--按钮
input type="button" 普通按钮
input type="image" 图片按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>按钮:
<input type="button" name="btn1" value="点击边长">
<input type="image" src="../resources/image/qq.jpg" height="200px" width="200px">
</p>
15.下拉框,文本域,文件域
<!-- 下拉框,列表框-->
<p>国家:
<select name="列表名称">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="eth" selected>瑞士</option>
</select>
</p>
<!--文本域
cols 列
rows 行
-->
<p>反馈
<textarea name="textarea" cols="30" rows="10">文件内容</textarea>
</p>
<!--文件域-->
<p>
<input type="file" name="files">
<input type="button" value ="上传" name="upload">
</p>
16.邮箱验证,URL,数字,滑块,搜索板
<!--邮箱验证-->
<p>邮箱:
<input type="email" name="email">
</p>
<!--URL-->
<p>url:
<input type="url" name="url">
</p>
<!--数字
step表示每次修改数字的大小 加或者减
-->
<p>商品数量:
<input type="number" name="num" max="100" min="0" step="2">
</p>
<!--滑块
input type="range"
-->
<p>音量
<input type="range" name="voice" max="100" min="0" step="10">
</p>
<!--搜索板-->
<p>搜索:
<input type="search" name="search">
</p>
16.只读readonly,禁用disable,隐藏域 hidden
只读 readonly ,只能读取,点击文本框也不能修改
<p>姓名:<input type="text" name="username" value="张三" readonly maxlength="8" size="30"></p>
<p>密码:<input type="password" name="pwd" size="30"></p>
禁用disable ,使用后按键变成灰色,不能在使用
<input type="submit" disabled>
隐藏域hidden 把文本框或者其他的框隐藏起来,不能看见,但不会改变里面的值
但提交后在url中仍然可以看到
<p>姓名:<input type="text" name="username" value="张三" readonly maxlength="8" size="30"></p>
<p>密码:<input type="password" name="pwd" value="123456" hidden size="30"></p>
17.placeholder 提示输入什么
在文本框中使用,提示要输入什么内容
<p>姓名:<input type="text" name="username" maxlength="8" placeholder="请输入姓名"></p>
<p>密码:<input type="password" name="pwd" placeholder="请输入密码"></p>
18.requried 非空判断
在代码中加入required,则此文本框不能为空,必须输入内容
<p>名字:<input type="text" name="username" required></p>
<!-- 密码输入框<input type="password"-->
<p>密码:<input type="password" name="pwd"></p>
总结
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
