HTML

莱莱  金牌会员 | 2022-8-10 06:02:17 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 836|帖子 836|积分 2508

一、HTML概述<p></p><p></p>
超文本标记语言<p></p>
1.标签<p></p><p></p>
    <p></p>
  • 由尖括号包围（）<p></p>
  • 通常成对出现（)，单个标签<        /><p></p>
  • 标签嵌套（注意缩进）<p></p>
属性:一个标签可能有多个属性，属性的先后顺序不影响<p></p>
  1. <img src = "logo.jpg" alt = "站标"/><p></p>/*<p></p>标签名:img<p></p>属性:src、alt<p></p>值:"logo.jpg"、"站标"<p></p>*/
复制代码
2.文件结构<p></p><p></p>
  1. <html><p></p>    <head>//头部：浏览器搜索引擎所需信息<p></p>        <title></title><p></p>    </head><p></p>    <body>//主体内容：网页的具体内容<p></p>        <p></p>    </body><p></p></html>
复制代码
HTML5文件结构<p></p>
  1. <!DOCTYPE html>//文件类型：符合HTML标准<p></p><html lang="en">//lang属性：搜索引擎（en英文，zh中文）<p></p>    <head><p></p>        <meta charset="UTF-8">//<meta>标签：元数据，charset属性：编码方式<p></p>        <title></title><p></p>    </head><p></p>    <body><p></p>        <p></p>    </body><p></p></html>
复制代码
二、HTML标签<p></p><p></p>1.标题<p></p><p></p>
h1h6:一级标签六级标签（一个页面建议只有一个好）<p></p>
  1. <h1></h1><p></p><h2></h2><p></p><h3></h3><p></p><h4></h4><p></p><h5></h5><p></p><h6></h6>
复制代码
2.段落<p></p><p></p>
  1. <p></p>
复制代码
连续的空格，空行只生成一个空格<p></p>
2.1段内换行<p></p><p></p>
  1. <p></p>
复制代码
单独出现的标签<p></p>
  1. 段落<p></p>后面的内容<p></p>
复制代码
2.2空格字符<p></p><p></p>
  1. //     内容   <p></p>
复制代码
2.3预留格式标签<p></p><p></p>
  1. [/code][indent][b]会保留原格式[/b]<p></p>[/indent][size=4]2.4行内组合[/size]<p></p><p></p>[indent]组合行内元素，以便通过CSS样式来格式化<p></p>[/indent][code]组合的元素
复制代码
  1. <style type="text/css">
  2. span{
  3.     color:blue;
  4.     font-weight:bold;
  5. }
  6. </stylt>
复制代码
2.5水平线<p></p><p></p>
  1. <hr/>
复制代码
2.6注释<p></p><p></p>
注释不在浏览器中显示<p></p>注释可以跨行<p></p>
3.超链接<p></p><p></p>
  1. <a target="_blank" href="https://www.cnblogs.com/网址">文字或图片</a>
  3. //链接到本站点其他网页
  4. <a target="_blank" href="https://www.cnblogs.com/news.html">新闻</a>
  5. //链接到其他站点
  6. <a target="_blank" href="http://www.baidu.com">百度</a>
  7. //虚拟超链接
  8. <a target="_blank" href="https://www.cnblogs.com/#">板块1</a>
复制代码
4.图像<p></p><p></p>
  1. <img src="https://www.cnblogs.com/路径" alt="文件名">
复制代码
5.区域<p></p><p></p>
  1. [/code][size=5]6.列表[/size]<p></p><p></p>[indent]无序列表<p></p>[/indent][code]<p></p>[list]    <p></p>[*]//列表项<p></p>[/list]
复制代码
有序列表<p></p>
  1. [list=1]    <p></p>[*]<p></p>[/list]
复制代码
7.表格<p></p><p></p>
  1. <table>
  2.     <tr>//行
  3.         <td></td>//列
  4.     </tr>
  5. </table>
  7. <th></th>//表头（加粗）
复制代码
8.表单<p></p><p></p>
采集用户数据的区域<p></p>
表单元素：文本框、按钮、单选、复选、下拉列表、文本域<p></p>
  1. <form action="数据处理网页">
  2.     表单元素
  3. </form>
复制代码
8.1文本框<p></p><p></p>
  1. //文本框和密码框    账户：    <p></p>    密码：
复制代码
8.2按钮<p></p><p></p>
提交按钮：type属性为submit<p></p>
  1. [/code][indent]重置按钮type属性为reset<p></p>[/indent][code]
复制代码
8.3单选框和复选框<p></p><p></p>
单选框：type属性为radio<p></p>几个选项的name属性必须相同<p></p>
  1. [/code][indent]复选框：type属性为checkbox<p></p>[/indent][code]
复制代码
checked=“checked"，则该项被默认选择<p></p>8.4下拉列表框<p></p><p></p>
  1. <select>
  2.     <option>选项1</option>
  3.     <option selected="selected">选项2</option>
  4. </select>
复制代码
selected="selected"，则该项被默认选择<p></p>8.5文本域<p></p><p></p>
  1. <textarea row="行数" cols="列数">提示内容</textarea>
复制代码
三、Web语义化<p></p><p></p>
让页面具有良好的结构与含义<p></p>
<p></p>
    <p></p>
  • 有利于团队的开发、维护<p></p>
  • 有利于搜索引擎理解<p></p>
  • 容易兼容不同设备<p></p>
  1. <em>强调</em>//斜体
  2. <strong>重点强调</strong>//加粗
  4. //自定义列表
  5. <dl>
  6.     <dt>列表项</dt>
  7.     <dd>列表项的描述</dd>
  8. </dl>
复制代码
四、VS Code使用<p></p><p></p>
    <p></p>
  • Ctrl+/：快速/撤销生成注释<p></p>
  • 快速生成标签：p>span（嵌套）、div+p（同级）、li*3(多个元素)<p></p>
  • 快速生成文字：lorem，lorem4（生成4个单词）<p></p>
  • 快速添加属性：img[src="http://www.baidu.com"]<p></p>
<p></p>免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

莱莱

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表