JavaSE基础二十六：HTML下的基本标签、列表、表格、媒体元素
一、HTML
1.HTML简介
HTML ： Hyper Text MarkUp Language （超文本标记语言）
文本：文字、有格式的文本
超文本：文字，图片，音频，视频，动画、等
1.2 W3C标准
W3C：万维网联盟
结构化标准 （XHTML、HTML）
表现标准 （CSS）
行为标准 （Dom、ECMAScript标准==> JavaScript）
万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构
很多浏览器还停留在ES5规范上，但是开发人都使用的是ES6规范
1.3域名后缀：
.com 国际
.cn 中国
.org 开源
二、IDEA写HTML
HTML的基本结构
大多数的HTML 标签 都以 <> 开始 结尾
正常网页的所有内容都需要放在 < body> 标签中
<html lang="en">
<head><meta charset="UTF-8"><title>我的第一个网页title>
head>
<body>body>
html>
网站的基本标签：
2.1
<html lang="en">
<head><meta charset="UTF-8"><title>我的第一个网页title>
head>
<body>
<h1>hello,worldh1>body>
html>2.2
<html lang="en">
<head><meta charset="UTF-8"><title>静夜思title>
head>
<body>
<h1>静夜思h1> <br>
<hr>
<em>唐 李白em>
<p>窗前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。<br>
p>body>
html>
2.3
<html lang="en">
<head><meta charset="UTF-8"><meta name="keywords" content="一起学Java"><meta name="description" content="学Java"><title>你好title>
head>
<body>
body>
html>2.4
<html lang="en">
<head><meta charset="UTF-8"><title>网页的基本标签title>
head>
<body>
<p>欢迎来到王者荣耀p>
<p>欢迎来到 王者荣耀p>
<p>欢迎来到 王者荣耀p>
<p>欢迎来到 王者荣耀p>
>
<<br>
© 版权所有人：八神庵；<br>
☎<br>
<strong>马云strong>
<p><em>阿里巴巴em>
p><hr><h1>一级标题h1><br>
<h2>二级标题h2><br>
<h3>三级标题h3><br>
<h4>四级标题h4><br>
<h5>五级标题h5><br>
<h6>六级标题h6><br><hr>
<p> 走走，走走走，我们小手拉大手
p><p>走走，走走走，一同去郊游
p>body>
html>2.5
<html lang="en">
<head><meta charset="UTF-8"><title>图片标签title>
head>
<body>
<img src="../statics/images/1001677.jpg" alt="图片加载失败" title="房屋" width="800" height="500">body>
html>2.6
<html lang="en">
<head><meta charset="UTF-8"><title>超链接title>
head>
<body>
<a href="https://www.baidu.com/" target="_blank" >百度a><a href="https://www.baidu.com/" target="_blank"><img src="../statics/images/1001677.jpg" width="800" height="600">
a>body>
html>2.7
<html lang="en">
<head><meta charset="UTF-8"><title>锚链接title>
head>
<body>
<a href="#markerA">Aa> <br>
<a href="#markerB">Ba> <br>
<a href="#markerC">Ca> <br><a href="https://www.baidu.com">Da> <br>
<a href="3.基本结构.html#haha">Ea><br><a href="">Fa><br><hr><p>1111111111111111111p>
<p>1111111111111111111p>
<p>1111111111111111111p>
<p>1111111111111111111p>
<p>1111111111111111111p>
<a name="markerA">你找到了Aa>
<p>1111111111111111111p>
<p>1111111111111111111p>
<p>1111111111111111111p>
<a name="markerB">你找到了Ba>
<p>1111111111111111111p>
<p>1111111111111111111p>
<p>1111111111111111111p>
<p>1111111111111111111p>
<p>1111111111111111111p>
<p>1111111111111111111p>
<a name="markerC"><h1>你找到了Ch1>a>
<p>1111111111111111111p>
<p>1111111111111111111p>
<p>1111111111111111111p>
<p>1111111111111111111p>body>
html>
列表、表格、媒体元素
2.8
<html lang="en">
<head><meta charset="UTF-8"><title>列表title>
head>
<body>
<ul><li>世界li><li>你好li>
ul><hr>
<ol><li>张三li><li>李四li>
ol><hr>
<dl><dt>水果dt><dd>苹果dd><dd>香蕉dd><dd>橘子dd>
dl>body>
html>2.9
<html lang="en">
<head><meta charset="UTF-8"><title>表格title>
head>
<body>
<table border="1px"><tr><td>1-1td><td>1-2td>tr><tr><td>2-1td><td>2-2td>tr>
table><hr>
<table border="1px"><tr ><td colspan="2">1-1td>tr><tr><td>2-1td><td>2-2td>tr>
table><hr>
<table border="1px"><tr><td rowspan="2">1-1td><td>1-2td>tr><tr><td>2-1td>tr>
table>body>
html>
2.10 视频地址需为本地地址
<html lang="en">
<head><meta charset="UTF-8"><title>视频title>
head>
<body><video src="https://vdept.bdstatic.com/4851384657325763486b7755476d7752/
776a574278317766/a7610772c1b41104b811240e070aed96b2055fb10eca9de146aece110dca31891eea0d9933c85ca6fc7f5c8d6ae65648
.mp4?auth_key=1576586545-0-0-0206b01b71241f0fd20999cc076af951
" controls autoplay width="800" height="400">video>body>
html>2.11 歌曲地址需是本地地址
<html lang="en">
<head><meta charset="UTF-8"><title>音频title>
head>
<body>
<audio src="../statics/musics/下山.m4a" controls autoplay>audio>body>
html>2.12
<html lang="en">
<head><meta charset="UTF-8"><title>内联框架title>
head>
<body>
<iframe src="https://www.baidu.com" width="800" height="400">iframe>
<iframe name="mainframe" >iframe>
<a href="https://www.baidu.com" target="mainframe">点击显示a>body>
html>表单
2.13
<html lang="en">
<head><meta charset="UTF-8"><title>我的第一个表单title>
head>
<body>
<form action="test.html" method="get">
<p>账号<input type="text" name="username">p><p>密码<input type="password" name="password">p><p><input type="submit" name="提交"><input type="reset" name="重置">p>form>
body>
html>
2.14
<html lang="en">
<head><meta charset="UTF-8"><title>表单元素title>
head>
<body><form action="test.html" method="post"><p><input type="text" name="username" value="用户名" size="30" maxlength="20">p><p><input type="password" name="password" size="30">p><p><input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女p><p><input type="checkbox" name="hobby" value="篮球" checked>篮球<input type="checkbox" name="hobby" value="足球">足球<input type="checkbox" name="hobby" value="乒乓球">乒乓球<input type="checkbox" name="hobby" value="羽毛球">羽毛球p><select name="科目" size="3"><option value="1">语文option><option value="2">数学option><option value="3">英语option><option value="4">物理option><option value="5">化学option>select><p><input type="submit" value="提交"><input type="reset" value="重置"><input type="button" value="点我"><input type="image" src="../statics/images/1001677.jpg" width="100" height="50">p><textarea name="textarea" cols="30" rows="10">textarea><p>邮箱<input type="email" name="email">p><p>网址<input type="url" name="url">p><p>计数<input type="number" max="100" min="0" step="10">p><p><input type="range" name="range" min="0" max="100" step="2">p><p><input type="search" name="search">p>
form>body>
html>
2.15
<html lang="en">
<head><meta charset="UTF-8"><title>文件域title>
head>
<body><form action="test.html" method="get" enctype="multipart/form-data"><input type="file" name="video">
form>body>
html>
2.16
<html lang="en">
<head><meta charset="UTF-8"><title>表单应用title>
head>
<body><form action="test.html" method="post"><p>用户名<input type="url" name="username" placeholder="必须是url格式">p><p>密码<input type="password" name="password" required>p><p>手机号<input type="text" name="phonenumber" required pattern="^1[358]\d{9}">p><p><input type="submit" value="提交"><input type="reset" value="重置">p>
form>
body>
html>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！