ToB企服应用市场:ToB评测及商务社交产业平台

标题: Java前端基础—HTML [打印本页]
作者: 杀鸡焉用牛刀    时间: 2024-12-28 06:32
标题: Java前端基础—HTML
Java前端基础—HTML


  
1.简介

1.网页组成：笔墨，图片，音频，视频，超链接。
2.代码如何转换成网页：依靠的是欣赏器的渲染和解析将代码翻译成网页。
3.渲染引擎**（欣赏器内核）**：欣赏器中专门对代码进行解析渲染的部门。欣赏器出品的公司不同，内涵的渲染引擎也是不同，渲染引擎不同，导致解析雷同代码的速度、性能、效果也不同。这就是后面前端要处理一大难题，适配兼容题目。
4.web 标准：让不同欣赏器按照雷同的标准表现结果，让展示的效果统一。
构成语言阐明结构HTML页面元素和内容体现CSS网页元素的外观和为止等页面样式（颜色、巨细等）举动JavaScript网页模子的界说与页面交互（负责页面的动态效果） 2.基础语法

2.1HTML页面固定结构

  1. <!--
  2. html：网页的整体
  3. head：网页的头部，就是网页上面的名字
  4. body：网页的身体，就是网页具体的内容
  5. title：网页的标题
  6. -->
  7. <html>
  8.     <head>
  9.         <title>标题</title>
  10.     </head>
  11.     <body>
  12.         主体内容
  13.     </body>
  14. </html>
复制代码
2.2标题标签

  1. <body>
  2.     <h1>1级标题</h1>
  3.     <h2>2级标题</h2>
  4.     <h3>2级标题</h3>
  5.     <h4>2级标题</h4>
  6.     <h5>2级标题</h5>
  7.     <h6>2级标题</h6>
  8. </body>
复制代码
2.3段落标签

  1. <!--
  2. 段落标签独占一行
  3. 段落标签里面选择style=，选择风格特性，这里2em代表段落前面空两格
  4. -->
  5. <p style="text-indent: 2em;">
  6.         这是一个段落<br>标签
  7. </p>
复制代码
2.4换行标签

  1. <!-- 换到下一行，这是个单标签 -->
  2. <p style="text-indent: 2em;">
  3.         这是一个段落<br/>标签
  4. </p>
复制代码
2.5水平线标签

  1. <!-- <hr/>是个单标签 -->
  2. <body>
  3.     <h1>这是一个标题标签</h1>
  4.     <hr/>
  5.     <h2>2级标题</h4>  
  6. </body>
复制代码
2.6文本标签

  1. <body>
  2.     <b style="color: red;">加粗</b>
  3.     <i>倾斜</i>
  4.     <u>下划线</u>
  5.     <s>删除线</s>
  6.     <strong>加粗</strong>
  7.     <ins>下划线</ins>
  8.     <em>倾斜</em>
  9.     <del>删除线</del>
  10. </body>
复制代码
2.7图片标签

  1. <!--
  2. 特点：是单标签
  3. img标签需要展示对应的效果，需要借助标签的属性进行设置，也可以加载gif
  4. 属性值：
  5.         alt：替换文本，只有图片加载失败时候才会显示的文本
  6.         title：提示文本，当鼠标悬停的时候，才显示文本title文本不仅仅用于图片标签，还可以用于其他标签
  7.         width和height：宽度和高度（数字）如果只设置width和height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）如果同时设置了width和height两个,若设置不当此时图片可能会变形
  8. -->
  9. <body>
  10.     <img src="链接地址" alt="">
  11. </body>
复制代码
2.8音频标签

  1. <!--
  2. src:路径
  3. controls:显示播放的控件
  4. autoplay:自动播放(部分浏览器不支持)
  5. loop:循环播放
  6. -->
  7. <audio src="./音频名.mp3" controls></audio>
复制代码
2.9视频标签

  1. <!--
  2. src:视频路径
  3. controls:显示播放空间
  4. autoplay:自动播放(谷歌浏览器中需要配合muted实现静音播放) loop:循环播放
  5. -->
  6. <video src="./视频名.mp4" controls autoplay muted></video>
复制代码
2.10链接标签

  1. <!--
  2. 空链接：用#代替
  3. href:设置跳转链接网站地址
  4. target:设置目标网页的打开形式
  5.   _self         默认值，在当前窗口中跳转(覆盖原网页)
  6.   _blank 在新窗口中跳转(保留原网页)
  7. -->
  8. <a href="https://www.baidu.com">跳转到百度</a>
复制代码
2.11列表标签

  1. <!--
  2. 1.无序列表  2.有序列表：有明确排序的布局  3.自定义列表
  3. -->
  4. <body>
  5.         <!-- 表示无序序列的整体，用于包裹li标签 -->
  6.     <ul>
  7.             <!-- 表示无序列表的每一项，用于包含每一行的内容 -->
  8.         <li>这是一个无序列表</li>
  9.     </ul>
  10.    
  11.         <!-- 表示有序序列的整体，用于包裹li标签 -->
  12.         <ol>
  13.                 <!-- 表示有序列表的每一项，用于包含每一行的内容 -->
  14.         <li>这是一个有序列表</li>
  15.     </ol>
  16.        
  17.         <!-- dl        表示自定义列表的整体，用于包裹dt/dd标签 -->
  18.         <dl>
  19.                 <!-- dt        表示自定义列表的主题 -->
  20.         <dt>帮助中心</dt>
  21.         <!-- dd标签会自动显示缩进 -->
  22.         <dd>账户管理</dd>
  23.         <dd>购物指南</dd>
  24.         <dd>订单操作</dd>
  25.     </dl>
  26. </body>
复制代码
2.12表格标签

  1. <body>
  2.   1.普通表单，没有样式
  3.   <!-- 表格整体，可用于包裹多个tr -->
  4.   <table>
  5.           <!-- 表格每行，可用于包裹td -->
  6.     <tr>
  7.             <!-- 表格单元格，可用于包裹内容-->
  8.         <td>姓名</td><td>学科</td><td>成绩</td>
  9.     </tr>
  10.     <tr>
  11.         <td>小明</td><td>数学</td><td>142</td>
  12.     </tr>
  13.     <tr>
  14.         <td>小风</td><td>英语</td><td>144</td>
  15.     </tr>
  16.   </table>  
  18.   2.添加样式，表名和表头的表格
  19.   <table border="3" width="200" height="120"> <!-- 添加样式 -->
  20.           <!--
  21.                 caption-表格大标题-表示表格整体大标题，默认在表格整体顶部居中位置显示
  22.                 th-表头单元格-表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
  23.         -->
  24.           <caption><b>成绩单</b></caption>
  25.     <tr>
  26.         <th>姓名</th><th>学科</td><th>成绩</td>
  27.     </tr>
  28.     <tr>
  29.         <td>小明</td><td>数学</td><td>142</td>
  30.     </tr>
  31.     <tr>
  32.         <td>小风</td><td>英语</td><td>144</td>
  33.     </tr>
  34.   </table>  
  36.   3.含有表格结构的标签
  37.   <table border="3" width="200" height="120">
  38.     <caption><b>成绩单</b></caption>
  39.     <thead>
  40.       <tr>
  41.         <th>姓名</th><th>学科</th><th>成绩</th>
  42.       </tr>
  43.     </thead>
  44.     <tbody>
  45.       <tr>
  46.         <td>小明</td><td>数学</td><td>142</td>
  47.       </tr>
  48.       <tr>
  49.         <td>小风</td><td>英语</td><td>144</td>
  50.       </tr>
  51.     </tbody>
  52.     <tfoot>
  53.       <tr>
  54.         <td>姓名集</td><td>学科集</td>><td>1111</td>
  55.       </tr>
  56.     </tfoot>
  57.   </table>  
  58.   4.合并单元格
  59.   <tr>
  60.       <td>耶耶</td>
  61.       <!--
  62.                 rowspan        合并单元格的个数跨行合并，将多行单元格垂直合并
  63.                 colspan        合并单元格的个数跨列合并，将多列的单元格水平合并
  64.           -->
  65.       <td rowspan="2">144</td>
  66.       <td>数学</td>
  67.     </tr>
  68.     <tr>
  69.       <td>云云</td><!--<td>133--></td><td>数学</td>
  70.     </tr>
  71. </body>
复制代码
2.13表单标签

场景：在网页中表现收集用户信息的表单效果，如登录页、注册页
标署名：input，input标签可以通过type属性值的不同，展示不同效果
type属性值：
标署名type属性值阐明inputtext文本框，用于输入单行文本inputpassword密码框，用于输入密码inputradio单选框，用于多选一inputcheckbox多选框，用于多选多inputfile文件选择，用于多选多inputsubmit提交按钮，用于提交inputreset重置按钮，用于重置inputbutton普通按钮，默认无功能，须要共同js添加功能
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>表单标签</title>
  6. </head>
  7. <body>
  9. <!-- 1.type = "text"时placeholder提示文字 -->
  10. <p>
  11.    <input type="text" placeholder="请输入姓名">
  12. </p>
  13. <!-- 2.type = "radio"时只能有一个被选中，checked默认选中 -->
  14. <p>
  15.   性别：<input type="radio" name="gender">男
  16.    <input type="radio" name="gender" checked> 女
  17. </p>
  18. <!-- 3.type = "file"时选择文件，multiple多文件选择 -->
  19. <p>
  20.     文件选择：<input type="file" multiple>
  21. </p>
  22. <!-- 4.input和button的type 都可以为”submit“,”reset“,"button" -->
  23. <p>       
  24.    <button type="submit">提交按钮</button>
  25. </p>
  26. <!-- 5.下拉列表标签，select是整体，option是下拉每一项，option是默认选中 -->
  27. <select>
  28.         <option>小明</option>
  29.         <option selected>小白</option>
  30. </select>
  31. <!-- 6. textarea 文本域标签 场景：在网页中提供可输入多行文本的表单控件
  32. 标签名：textarea
  33. 常见属性：cols：规定了文本域内可见宽度  rows：规定了文本域内可见行数
  34. 右下角可以拖拽改变大小，该样式主要采用CSS设置
  35. -->
  36. <br/><br/>
  37. <textarea rows="10" cols="30">
  38. 我是一个文本框。
  39. </textarea>
  40. <!-- 7.label 常用于绑定内容与表单标签的关系，原来需要点选项前的圆圈，现在直接点击文本也可以选中 -->
  41. <p>
  42.         <label><input type="radio" name="gender"> 女</label>
  43. </p>
  44. </body>
  45. </html>
复制代码
2.14语义标签

  1. <body>
  2.         <!-- 无语义标签 -->
  3.     <div>这是一个div标签</div>
  4.     <div>这是第二个div标签</div>
  5.     <span>这是一个span标签</span>
  6.     <span>这是第二个span标签</span>
  8.         <!-- 有语义的布局标签 -->
  9.         <header>网页头部</header>
  10.     <nav>网页导航</nav>
  11.     <footer>网页底部</footer>
  12.     <aside>网页侧边栏</aside>
  13.     <section>网页区块</section>
  14.     <article>网页文章</article>
  16.         <!-- 空格-&nbsp -->
  17.         <header>网页&nbsp;&nbsp;头部</header>
  18. </body>
复制代码
  注：以上是HTML重要使用部门，还有些细碎衍生部门这里不多做阐明。可以从这里去学习HTML相关知识：点这里

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4