HTML学习
初识HTML
什么是HTML
Hype Text Markup Language(超文本标记语言)
w3c:万维网联盟
w3c标准包括:
-
结构化标准语言:HTML,XML
-
表现标注语言:CSS
-
行为标准:DOM,ECMAScript
注释结构和文字标签:
<!-- -->
快捷键🇩🇴🇩🇲+/
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--段落标签-->
<p>温效松</p>
<p>小帅比 </p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
温效松<br/>
小帅比<br/>
<h1>字体样式标签</h1>
粗体:<strong>温效松小帅比</strong>
斜体:<em>温效松小帅比</em>>
<!--特殊符号-->
空 格：
空 格
<br/>
大于号:>
<br/>
小于号:<
版权符号:©小帅比
图像标签:
<!--img学习
src:图片地址(必填)
相对地址,绝对地址
推荐使用相对路径
../表示上一级目录
alt:图片名字(必填)-->
<img src="../resources/img/证书.jpg" alt="帅比证书" title="悬停文字" width="300" height="300">
超链接标签及应用
<!--a标签
href:必填,要跳转到那个页面
target:表示窗口在哪里打开
_blank:在新标签中打开
_self:在当前页面打开
锚链接:先设置一个标记<a name"顶部">顶部</a>
再设置一个锚链接:<a href="#顶部">点我</a> 用#加上标记的名称
功能性链接:
邮箱链接:mailto:
<a href="mailto:1336509649@qq.com">联系我</a>
-->
<a href="1.我的第一个网页.html" target="_blank">点我跳到页面一</a>
<a href="https://www.baidu.com" target="_self">点我跳到百度 </a>
<br/>
<a href="1.我的第一个网页.html"><img src="../resources/img/证书.jpg" alt="帅比证书" title="悬停文字" width="300" height="300">
</a>
<a href="#顶部">点我</a>
<a href="mailto:1336509649@qq.com">联系我</a>
列表
<!--有序列表-->
<ol>
<li>java</li>
<li>web</li>
<li>大数据</li>
<li>人工智能</li>
</ol>
<!--无序列表-->
<ul>
<li>java</li>
<li>web</li>
<li>大数据</li>
<li>人工智能</li>
</ul>
<!-- 自定义列表
dt:标题
dd:列表内容-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>数据库</dd>
<dd>编译原理</dd>
</dl>
<dl>
<dt>姓名</dt>
<dd>温效松</dd>
<dd>小帅比</dd>
<dd>大帅比</dd>
</dl>
表格
<!-- 表格: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>
<!-- 跨列:rowspan-->
<td rowspan="2">3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
<hr/>
<table border="1px">
<tr colspan="3">学生成绩</tr>
<tr>
<td rowspan="2">温效松</td>
<td>Java</td>
<td>100</td>
</tr>
<tr>
<td>web</td>
<td>100</td>
</tr>
</table>
</table>
媒体元素(音频和视频)
<body>
<!--controls:播放
autoplay:自动播放 -->
<video src="路径" controls autoplay></video>
<audio src="路径" controls autoplay></audio>
</body>
页面结构分析
header:标题头部区域内容
footer:标记脚部区域内容
section:web页面中一块独立的区域
artical:独立的文章内容
aside:相关内容或应用,常用于侧边栏
nav:导航类辅助内容
<header>
<h2>头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>脚部</h2>
</footer>
</body>
iframe内联框架
<body>
<iframe src="" name="hello" frameborder="0" height="800" width="1000"></iframe>
<a href="https://www.baidu.com">点击跳转</a>
</body>
表单
<body>
<!--action:表单提交位置,可以是网站,也可以是一个请求处理地址
method:post,get
get:我们可以在URL中看到我们提交的信息,不安全但是高效
post:比较安全,传输大文件-->
<form action="1.我的第一个网页.html" method="get">
<h1>登录</h1>
<!-- 输入文本框-->
<p>名字: <input type="text" name="username"></p>
<!-- 密码框-->
<p>密码: <input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
文本框和单选框
表单元素格式:
<body>
<!--action:表单提交位置,可以是网站,也可以是一个请求处理地址
method:post,get
get:我们可以在URL中看到我们提交的信息,不安全但是高效
post:比较安全,传输大文件-->
<form action="1.我的第一个网页.html" method="post">
<h1>登录</h1>
<!-- 输入文本框
value="温效松小帅比" 默认初始值
maxlength="6" 允许输入的最大长度
size="30" 文本框长度-->
<p>名字: <input type="text" name="username" ></p>
<!-- 密码框-->
<p>密码: <input type="password" name="pwd"></p>
<!-- 单选框标签:radio
value:单选框的值
name:表示组,name一样表示在一个组内,一个组内只能选一个框
-->
<p>性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
按钮和多选框
<!-- input type="checkbox"多选框
默认选中:checked
-->
<p>爱好:
<input type="checkbox" value="sanshang" name="女明星">三上悠亚
<input type="checkbox" value="qiaoben" name="女明星">桥本有菜
<input type="checkbox" value="xiaotian" name="女明星">筱田优
<input type="checkbox" value="mingri" name="女明星">明日花绮罗
</p>
<!-- 按钮
input type="button 普通按钮
input type="image" src="地址" 图片按钮,点击直接提交
<input type="submit"> 提交按钮
<input type="reset"> 重置按钮
-->
<p>按钮:
<input type="button" value="点一哈试试" name="btn1">
<input type="image" src="地址">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
列表框 文本域和文件域
<!-- 下拉框
select默认选项
-->
<p>国家
<select name="列表名称" >
<option value="China" selected>中国</option>
<option value="US">美国</option>
<option value="Japan">日本</option>
</select>
</p>
<!-- 文本域
textarea name="textarea" cols="30" rows="10"
-->
<p>反馈意见
<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>
<!-- 文件域
input type="file"
-->
<p>
<input type="file" name="files">
</p>
搜索框滑块和简单验证
<!-- 邮箱验证
input type="email"
-->
<p>邮箱:
<input type="email" name="email">
</p>
<!-- url(网址)-->
<p>url:
<input type="url" name="url">
</p>
<!-- 数字
input type="number"
-->
<p>商品数量:
<input type="number" name="num" min="0" max="1000" step="1">
</p>
<!-- 滑块
input type="range
-->
<p>音量:
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!-- 搜索框
input type="search"
-->
<p>搜索:
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
表单的应用
隐藏域:hidden
<input type="search" name="search" hidden>
只读:readonly
名字: <input type="text" name="username" value="小帅比" readonly>
禁用:disabled
<input type="submit" disabled>
增强鼠标功能:
<!--增强鼠标可用性
label for="1" for里面填id
-->
<p>
<label for="1">点一哈</label>
<input type="text" id="1" >
</p>
表单初级验证
提示信息 :placeholder
名字: <input type="text" name="username" placeholder="请输入用户名">
不能为空:required
名字: <input type="text" name="username" placeholder="请输入用户名" required>
浙公网安备 33010602011771号