HTML详解
2021-01-25 14:13
标签：you 方式 https 区域 foo blank 规范 中国 资源 块元素：独占一行 行内元素：多个可以排在一行 header:标题头部区域的内容 footer：标记脚步区域的内容 section:Web页面的一块独立区域 article:独立的文章内容 aside:相关内容或应用（侧边栏） nav:导航类辅助内容 11.表单的应用 HTML详解 标签：you 方式 https 区域 foo blank 规范 中国 资源 原文地址：https://www.cnblogs.com/baconZhang/p/13235908.html1.网页基本标签
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>基本标签学习title>
head>
body>
h1>一级标签h1>
h2>一级标签h2>
h3>一级标签h3>
h4>一级标签h4>
h5>一级标签h5>
h6>一级标签h6>
hr/>
p>你好p>
p>再见了 亲爱的大海p>
hr/>
你好br/>
再见了 亲爱的大海 br/>
hr/>
粗体：strong>i love youstrong> br/>
斜体：em>i love youem>
hr/>
空 格 br/>
大于符号> br/>
小于符号< br/>
版权所有符号©
hr/>
body>
html>
2.图像标签
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>图像标签title>
head>
body>
img src="../resources/image/chenshu.jpg" alt="陈数" title="悬停文字" width="300" height="300">
body>
html>
3.链接标签
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>链接标签title>
head>
body>
a href="https:www.baidu.com">点击我跳转到百度a>br>
a href="图像标签.html">点击我跳转到图像标签页面a>br>
a href="https:www.baidu.com">
img src="../resources/image/chenshu.jpg" alt="陈数" title="悬停文字">
a>br>
a href="https:www.baidu.com" target="_blank">点击我_blank方式打开a>br>
a href="https:www.baidu.com" target="_parent">点击我_parent方式打开a>br>
a href="https:www.baidu.com" target="_self">点击我_self方式打开a>br>
a href="https:www.baidu.com" target="_top">点击我_top方式打开a>br>
hr>
a name="mark">标记a> br>
a href="#mark">页面回到锚链接标记的地方a>
hr>
a href="mailto:2564001572@qq.com">点击联系我a> br>
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::51" alt="点击给我发送消息" title="点击给我发送消息"/>
a>
body>
html>
4.行内元素和块元素
5.列表标签
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>列表标签title>
head>
body>
ul>
li>javali>
li>pythonli>
li>运维li>
li>c/c++li>
ul>
ol>
li>javali>
li>pythonli>
li>运维li>
li>c/c++li>
ol>
dl>
dt>学科dt>
dd>javadd>
dd>pythondd>
dd>Linuxdd>
dd>c/c++ dd>
dt>位置dt>
dd>河南dd>
dd>北京dd>
dd>上海dd>
dd>深圳dd>
dl>
body>
html>
6.表格标签
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>表格标签title>
head>
body>
table border="1px">
tr>
td colspan="4">1.1td>
td>1.2td>
tr>
tr>
td rowspan="2">2.1td>
td>2.2td>
td>2.3td>
td>2.4td>
td>2.5td>
tr>
tr>
td>3.2td>
td>3.3td>
td>3.4td>
td>3.5td>
tr>
table>
body>
html>
7.视频和音频标签
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>视频和音频标签title>
head>
body>
video src="../resources/test.mp4" controls autoplay>video>
audio src="" controls autoplay>audio>
body>
html>
8.页面结构分析
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>
9.iframe
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>iframetitle>
head>
body>
iframe src="https:www.baidu.com" name="baidu" frameborder="0">iframe>
body>
html>
10.表单
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>表单title>
head>
body>
h1>注册h1>
form action="01基本标签.html" method="get">
p>名字：input type="text" name="username">p>
p>密码：input type="password" name="password">p>
p>性别：
input type="radio" name="sex" value="男" checked>男
input type="radio" name="sex" value="女">女
p>
p>爱好：
input type="checkbox" name="hobby" value="打篮球">打篮球
input type="checkbox" name="hobby" value="游泳">游泳
input type="checkbox" name="hobby" value="看电影">看电影
input type="checkbox" name="hobby" value="听音乐" checked>听音乐
p>
p>
input type="file" name="files">
p>
p>滑块
input type="range" name="voice" min="0" max="100" step="10">
p>
p>搜索：
input type="search" name="search">
p>
p>input type="button" value="点击按钮">p>
p>input type="image" src="../resources/image/chenshu.jpg">p>
p>input type="submit" value="提交"> input type="reset" value="重置">p>
p>下拉框：
select name="列表名称">
option value="china">中国option>
option value="us">美国option>
option value="eth" selected>瑞士option>
option value="beijing">北京option>
select>
p>
p>反馈：
textarea name="textarea" cols="50" rows="6">文本内容textarea>
p>
form>
body>
html>