HTML基础语法入门 分手后的思念是犯贱 2022-01-06 03:49 248阅读 0赞 **1.基本结构** <html> --html开始标签 <head> -- 文件头（用户在浏览器的主体是看不到的） </head> <body> --文件体（用户在浏览器的主体看得到） </body> </html> --html结束标签 **2.head文件头** 作用：告诉浏览器如何解释该html页面 <html> <head> <!-- html注释 --> <!-- 作用：告诉浏览器如何解释该html页面 --> <!-- 标题 ：在窗口的标题栏看到--> <title>这是标题</title> <!-- 告诉浏览器使用什么码表解释html文件 --> <!-- html标签分类： 有标签体标签：有开始，有结束标签、 <title></title> 没有标签体标签 ： 也叫空标签 <meat /> --> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <!-- 关键词：keywords 搜索引擎： 百度 输入 java培训 网页的排名 推广 SEO SEO优化 关键词是网页排名的一个因素。 100% 权重 50% 33.3.% （3-5个合适） --> <meta name="keywords" content="java培训,net培训,php培训" /> <!-- 描述： 标题 描述 标题 描述 标题 描述 --> <meta name="description" content="这是一家专门做IT职业培训的公司"/> </head> <body> </body> </html> **3.文本标签** 标题(h1~h6) 水平线(hr) 段落§ 段落缩进(blockquote) 上下标(sup和sub) 换行(br) 原样输出(pre) 有序列表ol li 无序列表ul li 项目列表标签(dl dt dd) 行内标签(span) 块标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html文本标签</title> </head> <body> <!-- 标题(h1~h6)--> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!-- 水平线(hr) --> <hr/> <!-- p 段落 --> <p>第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容 </p> <p> 第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节 </p> <!--段落缩进(blockquote) --> <blockquote> 第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节 </blockquote> <!-- 上下标(sup和sub) 用于公式--> 数学公式：y=x的平方： y=x<sup>2</sup>水的化学式： H<sub>2</sub>O <!-- 换行(br) --> <br/> 下一个内容 <!-- 原样输出(pre)： 按照编辑器的效果直接输出 --> <pre> 凉州词 葡萄美酒夜光杯，欲饮琵琶马上催。 醉卧沙场君莫笑，古来征战几人回。 </pre> <pre> function checkName(){ alert("用户名不能为空!"); } </pre> <!--有序列表ol li --> <a name="list"></a> 你最喜欢的明星？ <ol> <li>凤姐</li> <li>芙蓉姐姐</li> <li>如花</li> </ol> 学生管理系统 <!--无序列表ul li --> <ul type="disc"> <li>学生管理</li> <li>成绩管理</li> <li>系统管理</li> </ul> <!-- 项目列表标签(dl dt dd) --> 软件公司的组织架构 <dl> <dt>技术总监</dt> <dd>攻城狮1号</dd> <dd>攻城狮2号</dd> <dd>攻城狮3号</dd> <dt>财务总监</dt> <dd>出纳1号</dd> <dd>出纳2号</dd> <dd>出纳3号</dd> </dl> <!-- 行内标签(span) 块标签<div> 在html中使用非常少，在css中用得多。 div+css的网页布局 --> <span>span的内容</span> <div>div的内容</div> </body> </html> ![1][] **4.超链接标签** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>超链接标签</title> </head> <body> <!-- a 超链接标签： 常用的属性： href 表示链接到的地址（文件） target 打开资源方式 _self: 当前窗口打开， _blank: 新窗口打开 协议执行资源的基本流程（超链接的原理）： 使用协议到本地计算机的注册表中查询是否有对应协议的软件（程序），有就执行，没有就不执行。 常见的协议： file:// 本地文件协议（本地或局域网） 在href中不写就是使用这个默认协议 http:// http协议（执行流程） 通常连接到域名或IP地址 thunder： 迅雷下载软件的协议 mailto: 调用本地的发送邮件的客户端软件 超链接作用； 1）链接到资源 2）作为锚点使用 打锚点： <a name="锚点名称"></a> 去到锚点： <a href="#锚点名称">内容</a> --> <a name="top"></a> <a href="03.html文本标签.html#list" target="_blank">超链接</a><br/> <a href="../1.jpg">链接到图片</a><br/> <a href="http://www.baidu.com">链接到百度</a><br/> <a href="http://www.moive.com/fuzhouzhe.avi">高清《小小星球》(普通通道)</a><br/> <a href="thunder://www.moive.com/fuzhouzhe.avi">高清《小小星球》(迅雷通道)</a><br/> <a href="mailto:343539633@qq.com">发送邮件给朋友</a> <br/><a href="#ch01">去到第一章</a> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <a name="ch01"></a> 第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容<br/> <a href="#top">返回顶部</a> </body> </html> ![2][] **5.图像标签** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图像标签</title> </head> <body> <!-- img 图像标签 常用属性： src : 表示图片源位置 width: 图片宽度 height: 图片高度 alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效 title: 提示文本。当鼠标放到图片上面出现。 地图（热点区域）：map 热点： area --> <img src="../2.jpg" alt="这是一张美女图片" border="0" usemap="#Map" title="提示文字"/> <map name="Map" id="Map"> <area shape="rect" coords="196,338,301,398" href="04.超链接.html" target="_self" /> <area shape="circle" coords="139,191,45" href="03.html文本标签.html" target="_blank" /> </map> </body> </html> ![3][] **6.转义字符** 常见的转义字符： ![4][] **7.表格标签** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表格标签</title> </head> <body> <!-- 标签： table 表格 tr 行 td 单元格 th 表头 caption 标题 常用的属性： border 表格的边框 width 宽度 heigth 高度 align 对齐方式。 left: 左对齐 center:居中 right：右对齐 rowspan 行合并。把多行的单元格合并 colspan 列合并。把多列的单元格合并 --> <table border="1px" width="400px" height="200px" align="center"> <caption>2019年期末考试成绩</caption> <thead> <tr> <th>姓名</th> <th>班级</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td rowspan="2">狗娃</td> <td>计算机1班</td> <td>80</td> </tr> <tr> <td>经济1班</td> <td>90</td> </tr> <tr> <td>狗剩</td> <td>计算机2班</td> <td>78</td> </tr> <tr> <td>狗蛋</td> <td>软件1班</td> <td>90</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">平均分</td> <td>85</td> </tr> </tfoot> </table> </body> </html> ![5][] **8.表单标签** 作用：用于采集用户输入的数据，提交给后台程序处理 表单标签： <form> 就是一个表单 <input type="text"> 单行输入域 <input type="password"/> 密码输入域 <input type="radio"/> 单选按钮 <input type="checkbox"/> 多选按钮 <select/> 下拉选项 <input type="hidden"/> 隐藏域。特点：不会显示到html页面上，但可以携带数据。 <input type="file"/> 文件选择器 <textarea></textarea> 多行输入域 <input type="submit"/> 提交按钮 <input type="button"/> 普通按钮 <input type="reset"/> 重置按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表单标签</title> </head> <body> <!-- 一个表单标签： 常用的属性： action: 表单提交到的地址.。点击了submit的提交按钮，就会把数据提交到action的地址 method: 提交方式。 两种提交方式： get 1）提交的数据会放到地址栏上面 2) get提交的数据不超过1kb，只适合简单的数据 post 1）提交的数据不会放到地址栏 2）post提交的数据没有限制。比如文件上传 --> <form action="http://localhost:8080/Test/GetData" method="get"> <!-- 单行输入域： 常用的属性 value: 该输入的默认值 name: 这个必须填。该name的属性值用于给后台程序获取该标签输入的内容 size: 可以输入的字符数量 --> 用户名：<input type="text" value="4-10位的字母或数字" name="userName" size="25" /><br/> <!--密码输入域： 以非明文的效果获取用户输入的数据。 --> 密码：<input type="password" name="userPwd" /><br/> <!-- 单选： 注意： 1)如果是同一组的单选选项就使用相同的name属性值 2)单选按钮的value属性一定填。这个value的值就是发送给后台程序的内容 --> 性别：<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女<br/> 爱好： <!-- 多选按钮： 注意： 1）如果是同一组的多选选项就使用相同的name属性值 2)多选按钮的value属性一定填。这个value的值就是发送给后台程序的内容 --> <input type="checkbox" name="hobby" value="篮球"/>篮球 <input type="checkbox" name="hobby" value="足球"/>足球 <input type="checkbox" name="hobby" value="兵乓球"/>兵乓球<br/> 籍贯： <!-- 下拉选项： 注意： 1）name属性就是后台程序获取的标记 2)下拉选项的option标签中的value属性一定填。这个value的值就是发送给后台程序的内容 --> <select name="jiguan"> <option value="广东">广东</option> <option value="广西">广西</option> <option value="湖南">湖南</option> <option value="山东">山东</option> <option value="北京">北京</option> <option value="云南">云南</option> <option value="湖北">湖北</option> <option value="天津">天津</option> <option value="四川">四川</option> <option value="重庆">重庆</option> <option value="江苏">江苏</option> <option value="浙江">浙江</option> <option value="上海">上海</option> <option value="陕西">陕西</option> <option value="福建">福建</option> <option value="山西">山西</option> <option value="河南">河南</option> <option value="河北">河北</option> <option value="江西">江西</option> <option value="港澳台">港澳台</option> <option value="其它">其它</option> </select><br /> <!-- 隐藏域：用于携带数据，但是在页面上不会显示效果 注意： 1）name属性就是后台程序获取的标记 2) 这个value的值就是发送给后台程序的内容 --> <input type="hidden" name="id" value="001"/> 个人简介： <!--多行输入域：可以输入多行文本 rows: 一共有几行 cols: 一行可以输入几行字符 --> <textarea rows="5" cols="20" name="info"></textarea> <!-- 提交按钮： 点击这个按钮，form中的全部数据就会发送到后台 value: 表示按钮显示的文本 --> <input type="submit" value="注册"/> <!-- 重置按钮： 点击这个按钮，form中的所有标签返回到初始默认状态 --> <input type="reset" /> </form> </body> </html> ![6][] [1]: /images/20211228/5f080716a9974efda896631cc618d572.png [2]: /images/20211228/1c8adbf0fb77455a84c4e34885c2f148.png [3]: /images/20211228/2ea4d4b05e964720a4684e37af1dab69.png [4]: /images/20211228/fa6071b745354f05bf58a4ef8bda2166.png [5]: /images/20211228/9ea01ea514ac4a6cb5c347aacd3fe0f7.png [6]: /images/20211228/14e50e7f0bc44992b6c0e3a1c248454a.png
还没有评论，来说两句吧...