w3c规范
认识html
<!DOCTYPE html>
< html>
< head>
< meta charset = " utf-8" />
< title> 这是前端内容</ title>
< link href = " https://g.csdnimg.cn/static/logo/favicon.ico" rel = " shortcut icon" />
< meta name = " keywords" content = " html再线学习 html课外学习 html线下学习" />
< meta name = " description" content = " html再线学习 css在线学习 js再线学习 前端再线学习" />
</ head>
< body>
1111 3333 343434 234234
< br />
5< d c > 10
< hr />
字符实体:使用字符实体来表达实际的字符含义;
使用字符实体表达多个空格
例子:
11111
< br />
< : < 小于号 > 大于号
例子:
5< d c> 10
< pre>
333
+444
------
777
</ pre>
</ body>
</ html>
html结构
<!DOCTYPE html>
< html>
< head>
< meta charset = " utf-8" />
< title> 这是前端内容</ title>
< link href = " https://g.csdnimg.cn/static/logo/favicon.ico" rel = " shortcut icon" />
< meta name = " keywords" content = " html再线学习 html课外学习 html线下学习" />
< meta name = " description" content = " html再线学习 css在线学习 js再线学习 前端再线学习" />
</ head>
< body>
1111 3333 343434 234234
< br />
5< d c > 10
< hr />
字符实体:使用字符实体来表达实际的字符含义;
使用字符实体表达多个空格
例子:
11111
< br />
< : < 小于号 > 大于号
例子:
5< d c> 10
< pre>
333
+444
------
777
</ pre>
</ body>
</ html>
常见标签
<!DOCTYPE html>
< html>
< head>
< meta charset = " utf-8" />
< title> 常见标签 </ title>
</ head>
< body>
< h1> 一级标签</ h1>
< h2> 二级标签</ h2>
< h3> 三级标签</ h3>
< h4> 四级标签</ h4>
< h5> 五级标签</ h5>
< h6> 六级标签</ h6>
< hr />
h20 => h< sub> 2</ sub> 0
< br />
co2 => co< sub> 2</ sub>
< br />
x2 = 100 => x< sup> 2</ sup> = 100
< p> 这是第一个段落</ p>
< p> 这是第二个段落</ p>
< hr />
< strong> 川普是我的偶像</ strong>
< em> 我的爱人</ em>
< b> 川普是我的偶像</ b>
< i> 我的爱人</ i>
</ body>
</ html>
标签种类
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 标签的种类</ title>
</ head>
< body>
< span style =" width : 200px; height : 200px; background-color : yellowgreen; " > 我爱你
< span> 奥斯托夫罗斯基</ span>
</ span> 111
< div style =" width : 100%; height : 200px; background-color : seagreen; " > 我是网页的头部</ div>
< div style =" width : 100%; height : 200px; background-color : skyblue; " > 我是网页的身体</ div>
< div style =" width : 200px; height : 200px; background-color : tan; " > 我是网页的脚部</ div>
< button style =" width : 100px; height : 20px; background-color : salmon; " > 按我1</ button>
< button style =" width : 100px; height : 20px; background-color : sandybrown; " > 按我2</ button>
< button style =" width : 100px; height : 20px; background-color : seagreen" > 按我3</ button>
</ body>
</ html>
列表
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< ul type = " square" >
< li> 姜子牙</ li>
< li> 我和我的家乡</ li>
< li> 八百</ li>
< li> 唐人街探案3</ li>
</ ul>
< ol start = 10 type = " i" >
< li> 姜子牙</ li>
< li> 我和我的家乡</ li>
< li> 八百</ li>
< li> 唐人街探案3</ li>
</ ol>
< dl>
< dt> 女生曾经说过的谎言:</ dt>
< dd> 不要</ dd>
< dd> 你真坏</ dd>
< dd> 你是个好人</ dd>
< dd> 我给你介绍个漂亮的小姑娘</ dd>
</ dl>
</ body>
</ html>
超链接标签
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> a 超链接标签</ title>
</ head>
< body>
< a href = " ./2.html" target = " _self" > 点我1</ a>
< a href = " http://www.baidu.com" target = " _blank" > 点我2</ a>
< a href = " http://www.baidu.com/s?wd=王文" target = " _blank" > 点我3</ a>
< a href = " ./2.html?a=1&b=2&c=3&d=4" target = " _blank" > 点我4</ a>
< a href = " " > 点5</ a>
< a href = " #" > 点6</ a>
< a href = " VSCodeUserSetup-x64-1.51.0.exe" > 点7</ a>
</ body>
</ html>
a链接跳锚点
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> a链接 跳锚点 </ title>
</ head>
< body>
< ul>
< li> < a href = " #a1" > 第一章</ a> </ li>
< li> < a href = " #a2" > 第二章</ a> </ li>
< li> < a href = " #a3" > 第三章</ a> </ li>
</ ul>
< a id = " a1" > 第一章内容</ a>
< p style =" width : 500px; height : 1000px; background-color : silver; " > 孙悟空三打白骨精</ p>
< a id = " a2" > 第二章内容</ a>
< p style =" width : 500px; height : 1000px; background-color : skyblue; " > 孙悟空怒锤红孩儿</ p>
< a id = " a3" > 第三章内容</ a>
< p style =" width : 500px; height : 1000px; background-color : tan; " > 孙悟空大闹凌霄殿</ p>
< a href = " #" > 回到顶部</ a>
</ body>
</ html>
img图片标签
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> img 图片标签</ title>
</ head>
< body>
< a href = " https://baike.baidu.com/item/%E5%91%A8%E6%98%9F%E9%A9%B0/169917?fr=aladdin" >
< img src = " zhouxingchi1.jpg" width = " 200px" height = " 200px;" title = " 周星驰" />
</ a>
< img src = " zhouxingchi1.jpg" width = " 200px" height = " 200px;" />
</ body>
</ html>
table表格标签
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> table 表格标签</ title>
</ head>
< body>
< table border = 1 width = " 1000px;" >
< thead style =" background-color : tan; " >
< tr>
< th> 姓名</ th>
< th> 年龄</ th>
< th> 薪水</ th>
< th> 部门</ th>
</ tr>
</ thead>
< tbody style =" background-color : teal; " >
< tr>
< td> 王文</ td>
< td> 18</ td>
< td> 10万</ td>
< td> python</ td>
</ tr>
< tr>
< td> 王伟</ td>
< td> 20</ td>
< td> 11美元</ td>
< td> 开发部门</ td>
</ tr>
< tr>
< td> 王致和</ td>
< td> 22</ td>
< td> 100万</ td>
< td> 臭豆腐研发部门</ td>
</ tr>
</ tbody>
< tfoot style =" background-color : thistle; " >
< tr>
< td> lianxi1</ td>
< td> lianxi2</ td>
< td> lianxi3</ td>
< td> lianxi4</ td>
</ tr>
</ tfoot>
</ table>
< hr style =" width : 20px; height : 100px; " />
< table border = 1 width = " 1000px;" >
< thead style =" background-color : tan; " >
< tr>
< th> 姓名</ th>
< th> 年龄</ th>
< th> 薪水</ th>
< th> 部门</ th>
</ tr>
</ thead>
< tbody style =" background-color : teal; " >
< tr>
< td colspan = 2> 123</ td>
< td> 10万</ td>
< td rowspan = " 3" > 销售</ td>
</ tr>
< tr>
< td> 王伟</ td>
< td> 20</ td>
< td> 11美元</ td>
</ tr>
< tr>
< td> 王致和</ td>
< td> 22</ td>
< td> 100万</ td>
</ tr>
</ tbody>
< tfoot style =" background-color : thistle; " >
< tr>
< td colspan = 4> lianxi1</ td>
</ tr>
</ tfoot>
</ table>
</ body>
</ html>
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> table 表格的方向属性</ title>
</ head>
< body>
<table border=1 width="1000px;" height="200px;" cellspacing = "10" cellpadding="10">
< tr align = " center" valign = " top" >
< td> 王致和</ td>
< td> 蓝色</ td>
< td> 踢球</ td>
< td> 江西</ td>
</ tr>
<tr align="center" valign="middle"">
< td> 王致和</ td>
< td> 蓝色</ td>
< td> 踢球</ td>
< td> 江西</ td>
</ tr>
< tr align = " center" valign = " bottom" >
< td> 王致和</ td>
< td> 蓝色</ td>
< td> 踢球</ td>
< td> 江西</ td>
</ tr>
</ table>
</ body>
</ html>
iframe子窗口
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> iframe 子窗口</ title>
</ head>
< body>
< iframe src = " " name = " isme" width = " 1000px" height = " 200px;" > </ iframe>
< hr />
< a href = " http://www.baidu.com" target = " isme" > 点我跳转百度</ a>
< a href = " 3.html" target = " isme" > 点我跳转3.html</ a>
< a href = " 4.html" target = " isme" > 点我跳转4.html</ a>
</ body>
</ html>
音视频标签
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
<video src="ceshi.mp4" controls = "controls" style="width:100px;">
抱歉~! 您的浏览器不支持,该扔了
</ video>
<audio src="潮汐-她的城市.mp3" controls = "controls">
抱歉~! 您的浏览器不支持,该扔了
</ audio>
</ body>
</ html>
form标签
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> form表单<</ title>
</ head>
< body>
< form action = " " method = " " >
手机号:< input type = " text" name = " phone" value = " 王文" />
< br />
密码: < input type = " password" name = " pwd" value = " 李四" style =" width : 200px; height : 50px; " />
< br />
< input type = " submit" value = " 提交" />
</ form>
</ body>
</ html>
单选框 , 复选框, 下拉框
< form action = " " method = " " >
< input type = " radio" name = " sex" value = " m" id = " sex1" /> < label for = " sex1" > 男性</ label>
< input type = " radio" name = " sex" value = " w" id = " sex2" checked /> < label for = " sex2" > 女性</ label>
< hr />
< input type = " checkbox" name = " food" value = " banana" checked /> 香蕉
< input type = " checkbox" name = " food" value = " huanggua" /> 黄瓜
< input type = " checkbox" name = " food" value = " qiezi" checked /> 茄子
< input type = " checkbox" name = " food" value = " donggua" /> 冬瓜
< hr />
< select name = " city" >
< option value = " beijing" > 北京人</ option>
< option value = " xian" selected > 西安人</ option>
< option value = " dalian" > 大连人</ option>
< option value = " fuzhou" > 福州人</ option>
< option value = " zhengzhou" disabled > 郑州人</ option>
</ select>
<hr / >
< input type = " submit" value = " 点我" />
文件上传
< body>
< form action = " " method = " post" enctype = " multipart/form-data" >
头像:< input type = " file" name = " myfile" />
< hr/>
< textarea name = " info" style =" width : 100px; height : 100px; background-color : tan; " > 请填写相关数据</ textarea>
< hr/>
< input type = " hidden" name = " sid" value = " 13" />
< hr/>
< input type = " submit" value = " 提交" />
</ form>
</ body>
input属性
< body>
< form action = ' ' method = " " >
用户名:< input type = " text" name = " username" placeholder = " 请输入用户名" required tabindex = 5 />
< br />
密码: < input type = " password" name = " pwd" tabindex = 4 >
< br />
年龄: < input type = " text" name = " age" value = " 18" readonly tabindex = 3 />
< br />
邮箱: < input type = " text" name = " email" value = " 123463922@qq.com" disabled />
< br />
班级: <input type="text" name="classroom" size=100 maxlength = 5 minlength=2 tabindex=2/>
< br />
国籍: < input type = " text" name = " country" autofocus tabindex = 1 />
< br />
< input type = " submit" >
</ form>
</ body>