1、初识HTML

Hyper Text Markup Language（超文本标记语言）

  • < body >、< /body>等成对的标签，分别叫做开放标签和闭合标签，
  • 单独呈现的标签（空元素），如< hr/ >;意为用/来关闭空元素。
  • html注释：< !— 注释内容 —> 
  1. <!-- DOCTYPE：告诉浏览器使用什么规范（默认是html） -->
  2. <!DOCTYPE html>
  4. <!-- 语言 zh中文 en英文 -->
  5. <html lang="zh">
  7. <!-- head标签代表网页头部 -->
  8. <head>
  10.     <!-- meta 描述性标签，表示用来描述网站的一些信息 -->
  11.     <!-- 一般用来做SEO：搜索殷勤优化 -->
  12.     <meta charset="UTF-8">
  13.     <meta name="keywords" content="cess,javaweb">
  14.     <meta name="description" content="一起来学习java">
  16.     <!-- 网站标题 -->
  17.     <title>Title</title>
  18. </head>
  20. <!-- body代表主体 -->
  21. <body>
  22. Hello World！
  23. </body>
  25. </html>

2、网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>基本标签</title>
  6. </head>
  7. <body>
  9.       <!--标题标签-->
  10.     <h1>一级标签</h1>
  11.     <h2>二级标签</h2>
  12.     <h3>三级标签</h3>
  13.     <h4>四级标签</h4>
  14.     <h5>五级标签</h5>
  15.     <h6>六级标签</h6>
  17.     <!--段落标签-->
  18.     <p>p换行1</p>
  19.     <p>p换行2</p>
  21.       <!--水平线标签-->
  22.     <hr/>
  24.       <!--换行标签--><!--换行标签比较紧凑，段落标签有明显段间距-->
  25.     换行1 <br/>
  26.     换行2 <br/>
  28.     <!--粗体 斜体-->
  29.     <h1>字体样式标签</h1>
  30.     粗体：<strong>I love you </strong><br/>
  31.     斜体：<em>I love you </em><br/>
  33.     <!--特殊符号--><!--特殊符号记忆：&开头;结尾，只要在idea中&敲出后就有提示-->
  34.     空格：1&nbsp;2&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;4<br/>
  35.     空格：1 2  3   4<br/>
  36.     大于号&gt;<br/>
  37.     小于号&lt;<br/>
  38.     版权符号&copy;<br/>
  39. </body>
  40. </html>

  • 图像标签

    src：图像地址

    alt：没有图像时的替代文字

    title：鼠标悬停提示文字

    width

    height

  • 链接标签
    href： 必填，表示要跳转到那个页面
    target：表示窗口在那里打开 

    1.  **_blank**：在新标签中打开
    3.  **_self**： 在自己的网页中打开
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图像和链接标签</title>
  6. </head>
  7. <body>
  10.     <!--src:资源地址
  11.         相对地址，绝对地址
  12.         ../上级地址
  13.         alt：在图片加载失败的时候，就会用文字代替
  14.         title:鼠标悬停在图片上时，所显示的名字
  15.         width height 图片的高和宽
  16.         -->
  17.     <img src="../xxx.jpg" alt="图像不见了" title="悬停文字"><br/>
  20.     <!--href：跳转页面的地址
  21.         a标签内文字：即显示的文字
  22.         可以把图片放在a标签内，点击图片跳转网页
  23.         target:表示在哪打开新网页 
  24.                         _self:当前标签打开 
  25.                         _blank:新的页面中打开
  26.                         或者iframe的name
  27.         -->
  28.     <a href="https://www.baidu.com" target="_blank" title="123">百度</a><br/>
  29.     <a href="https://www.baidu.com"><img src="../xxx.jpg" alt="oops!图像不见了"></a><br/>
  31.     <!--锚链接
  32.         1.需要一个标记锚 可以是属性name 或 id
  33.         2.跳转到标记
  34.         #页面内跳转，如目录
  35.         -->
  36.     <a name="top"></a>
  37.     <a href="#top">回到顶部</a>
  38.     <br/>
  39.     <!--也可以在网址后添加#号跳到对应网站的对应位置-->
  40.     <a href="https://www.baidu.com#down">百度底部</a> <br/>
  42.     <!-- 功能性链接 邮箱链接：mailto -->
  43.     <a href="mailto:270017772@qq.com">点击联系我</a>
  45.     <!-- 功能性链接 qq链接 -->
  46.     <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=270017772&site=qq&menu=yes">
  47.       <img border="0" src="http://wpa.qq.com/pa?p=2:270017772:51" 
  48.            alt="加我领取小电影" title="加我领取小电影"/></a>
  51. </body>
  52. </html>

行内元素和块元素

  • 块元素
    • 无论内容多少，该元素独占一行
  1. 例如：<p> <hr/> <h1>...<h6>
    • 行内元素：内容撑开宽度，左右都是行内元素的可以排在一行
  1. 例如：<a> <strong> <em>

3、列表标签

什么是列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

列表的分类

  • 有序列表
  1. <ol>
  2.     <li>1</li>
  3.     <li>2</li>
  4.     <li>3</li>
  5. </ol>
  • 无序列表
  1. <ul>
  2.     <li>123
  3.         <ul>
  4.             <li>1</li>
  5.             <li>2</li>
  6.             <li>3</li>
  7.         </ul>
  8.     </li>
  9.     <li>2</li>
  10.     <li>3</li>
  11. </ul>

image.png

  • 定义列表
  1. <!--自定义列表
  2. dl：标签
  3. dt：列表名称
  4. dd：列表内容-->
  5. <dl>
  6.     <dt>学科</dt>
  7.     <dd>语文</dd>
  8.     <dd>数学</dd>
  9.     <dd>英语</dd>
  11.     <dt>语言</dt>
  12.     <dd>中文</dd>
  13.     <dd>英语</dd>
  14.     <dd>日语</dd>
  15. </dl>

image.png

4、表格

表格的基本结构

  • 单元格 table
  • 行 tr
  • 列 th td
  • 跨行 rowspan
  • 跨列 colspan 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格</title>
  6. </head>
  7. <body>
  10.     <!--表格table
  11.             行 tr
  12.             列 th td
  13.     -->
  14.     <table border="1px" align="center" cellspacing="0">
  15.         <tr>
  16.             <th colspan="3">1-1</th><!--跨列-->
  17.         </tr>
  18.         <tr>
  19.             <td rowspan="2">2-1</td><!--跨行-->
  20.             <td>2-2</td>
  21.             <td>2-3</td>
  22.         </tr>
  23.         <tr>
  24.             <td>3-2</td>
  25.             <td>3-3</td>
  26.         </tr>
  27.     </table>
  28. </body>
  29. </html>

image.png

5、视频和音频

  • video
  • audio
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>媒体元素</title>
  6. </head>
  7. <body>
  10.     <!--视频
  11.         src 资源路径
  12.             controls 控制面板
  13.             autoplay 自动播放
  14.     -->
  15.     <video src="xxx/xxx/xxx" controls autoplay></video><br/>
  17.     <!--音频-->
  18.     <audio src="xxx/xxx/xxx" controls autoplay></audio>
  21. </body>
  22. </html>

image.png

6、页面结构

元素名 描述
header 标题头部区域的内容（用于页面或者页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用
nav 导航类辅助内容 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>页面结构</title>
  6. </head>
  7. <body>
  8.       <!-- W3C的例子是<div id="header"> -->
  9.     <header>
  10.         <h2>网页头部</h2>
  11.     </header>
  13.     <section>
  14.         <h2>网页主体</h2>
  15.     </section>
  17.     <footer>
  18.         <h2>网页脚部</h2>
  19.     </footer>
  20. </body>
  21. </html>

7、iframe内联框架

  • iframe标签，必须要有src属性即引用页面的地址
  • 给标签加上name属性后，可以做a标签的target属性，即在内联窗口中打开链接
  1. <iframe src="//player.bilibili.com/player.html?aid=502917594&bvid=BV1bN411f7vB&cid=333506074&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" name="a" width="1000" height="500"> </iframe>
  3. <a href="https://player.bilibili.com/player.html?aid=502917594&bvid=BV1bN411f7vB&cid=333506074&page=1" target="a">跳转</a>

8、表单语法(重点)

from标签，action属性为所提交的目的地址，method选择提交方式可以选择使用post或者get方式提交

  • get 效率高，但在url中可以看到提交的内容，不安全，不能提交大文件
  • post 比较安全且可以提交大文件 | 标签 | 说明 | | —- | —- | | input标签 | 大部分表单元素对应的标签有text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text，可以提交用户名、密码等等 | | select标签 | 下拉选择框 option | | textarea标签 | 文本域 |
属性 说明
type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name 指定表单元素的名称（提交时所对应的key）
value 元素的初始值，radio必须提供
size 指定表单元素的初始宽度。当type为text或者password时，以字符为单位；其他type以像素为单位
maxlength type为 text 或者 password 时，输入的最大字符数
checked type为 radio 或者 checkbox 时，指定按钮是否被选中

一些其他的属性

属性 说明
readonly 标签只读，不可更改
disable 禁用
hidden 隐藏，虽然不可见但是会提交
id 标识符，可以配合label的for属性增加鼠标的可用性
placehoder text 文字域等输入框内的提示信息
required 不能为空
pattern 正则表达式验证 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>登录注册</title>
  6. </head>
  7. <body>
  8. <h1>注册</h1>
  10. <!--表单from
  11.         action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
  12.         method：post get请求方式
  13. -->
  14. <form action="xxx/xxx" method="get">
  17.     <!--文本输入框：input type="text"
  18.                 value 默认值
  19.                 maxlength 最大长度
  20.                 size 文本框长度
  21.                 placehoder 提示信息
  22.         -->
  23.     <p>用户名：<input type="text" name="username" 
  24.                   value="请输入用户名" maxlength="10" size="20"></p>
  25.       <p>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" 
  26.                   placeholder="请输入密码" required="required"></p>
  29.       <!--submit提交表单，reset清空-->
  30.     <p><input type="submit">&nbsp;&nbsp;&nbsp;<input type="reset" value="清空表单"></p>
  33.     <!-- radio单选框标签 value即单选框的值，在提交时对应value
  34.         name：单选框组名，在同一个组内的radio标签同时只能选中一个，name值在提交时对应key
  35.         checked:默认被选中
  36.     -->
  37.     <p>性别：
  38.           <input type="radio" name="sex" value="boy"  checked/>男
  39.         <input type="radio" name="sex" value="girl"/>女
  40.     </p>
  42.     <p>爱好：
  43.         <input type="checkbox" name="hobby" value="basketball">打篮球
  44.         <input type="checkbox" name="hobby" value="sing">唱rap
  45.         <input type="checkbox" name="hobby" value="dance">跳
  46.     </p>
  49.     <p><!--按钮-->
  50.           <input type="button" name="btn1" value="按钮上的文字">
  52.           <!--图片按钮默认是提交：同submit-->
  53.                 <input type="image" src="xxx/xxx">
  54.     </p>
  57.       <!--下拉框：selected:默认选项-->
  58.     <p>你来自：
  59.         <select name="location">
  60.             <option value="china" selected>中国</option>
  61.             <option value="us">美国</option>
  62.             <option value="japan">日本</option>
  63.         </select>
  64.     </p>
  67.       <!--文本域-->
  68.     <p>反馈：
  69.         <textarea name="text" id="10" cols="30" rows="10" >默认文本内容</textarea>
  70.     </p>
  73.       <!--文件域-->
  74.     <p>
  75.         <input type="file" name="files">
  76.         <input type="button" name="upload" value="上传">
  77.     </p>
  80.     <!--邮件：会简单验证是否是邮箱地址
  81.                 url：会简单验证是否是网络地址
  82.         -->
  83.     <p>
  84.           邮箱：<input type="email" name="email">
  85.         url：<input type="url" name="url">
  86.       </p>
  89.     <!--数字验证
  90.            max最大数量
  91.            min 最小数量
  92.            step 每次点击增加或减少的数量-->
  93.     <p>商品数量<input type="number" name="num" min="1" max="100" step="1"></p>
  96.     <!--滑块-->
  97.     <p>音量：<input type="range" name="voice" min="0" max="100" step="2"></p>
  100.     <!--搜索框-->
  101.     <p>搜索：<input type="search" name="search"></p>
  104.       <!--增强鼠标可用性-->
  105.     <p><label for="mark">你点我试试</label><input type="text" id="mark"></p>
  106. </form>
  107. </body>
  108. </html>

image.png