HTML5(HyperText Markup Language)

概述:

  • 超文本标记语言
  • 超文本：不仅包含普通文本，更强大，还可以包含图片、视频、音频、超链接、表格等内容
  • 标记语言：由标签构成的语言

文本标签

  • h1~h6 表示文档标题,

    ~

    , 呈现了六个不同的级别的标题 ,

    级别最高 ,

    级别最低
  • p 表示文本的一个段落
  • hr 表示段落级元素之间的主体转换 , 一般显示为水平线
  • i 表示文本斜体
  • b 表示加粗文本
  • font 表示字体 , 可以设置样式 (已过时)
  • br 表示换行
  1. <!--
  2.     h1~h6: header 标题标签,
  3.     align属性:对齐方式, 有3种 left(), center(), right()
  4. -->
  5. <!-- 选中内容 -> ctrl + alt + t 可以让内容包裹一个标签 -->
  6. <h1 align="left">我是h1标题标签</h1>
  7. <h2 align="center">我是h2标题标签</h2>
  8. <h3 align="right">我是h3标题标签</h3>
  10. <!--
  11.     hr:水平分割线
  12.     color:颜色  size:大小
  13. -->
  14. <hr color="blue" size="20px"/>
  16. <!--
  17.     font: 字体标签, font在H5版本中已经不使用,有其他替代方案
  18.     color: 颜色
  19.     size: 文字大小 1~7级  1最小, 7最大
  20.     face: 设置字体
  21. -->
  22. <font color="red" size="7" face="微软雅黑">这是一个字体标签</font>
  24. <!--b: 加粗  bold-->
  25. <b>加粗</b>
  26. <!--i: 倾斜 italic-->
  27. <i>倾斜</i>
  28. <!--br: -->
  29. <br>换行
  30. <!--p: 表示段落-->
  31. <p style="color: blue">这是一个段落</p>
  32. <p style="height: 80px">这是一个段落</p>
  33. </body>

有序列表和无序列表

ol - li

  • 1 数字列表,默认值
  • a, A 字母列表,包含大小写
  • i, I 罗马数字编号

    ul - li

  • disc ●默认样式
  • circle ○
  • square ■
  1. <ol type="I">
  2.     <li>口水鸡</li>
  3.     <li>口水鸭</li>
  4.     <li>口水鹅</li>
  5. </ol>
  7. <ul type="square">
  8.     <li>口水鸡</li>
  9.     <li>口水鸭</li>
  10.     <li>口水鹅</li>
  11. </ul>

特殊符号

image.png

div - span标签

  • 都是容器
  • span 是内联标签，不带换行功能，用于小范围的内容的划分
  • div 是块标签，自带换行功能，用于一段的范围的内容划分，通常网页布局使用div将网页分成不同块

图像标签

HTML5 CSS3 - 图3 不能写绝对路径

  • src 图片地址
  • width 宽度，如果只指定宽度，高度会按等比例缩放
  • height 高度
  • alt 如果图片丢失，出现的替代文字

超链接标签

概述:

  • 跳转到其他页面
  • 内容
  • href属性，表示超链接跳转指向的url地址
  • target属性，页面打开方式，_self当前页，_blank新标签页
  1. <!--
  2. a: 超链接标签, 可以跳转到其他页面, 如果是跳转到其他网站需要http://开头
  3.     href: 跳转的目的地
  4.     target: 打开方式
  5.         _self: 在本页面打开 默认的
  6.         _blank: 在新页面打开
  7. -->
  8. <a href="http://www.baidu.com" target="_blank">
  9.     百度一下,你就知道
  10. </a>
  12. <!--点击图片跳转到目的地-->
  13. <a href="http://www.baidu.com"><img src="img/picture.jpg" height="1000px"></a>

表格标签

标签

  • table 表格容器，包含其他的表格元素
  • tr 表示一行 table row
  • th 列标题：加粗，居中 table head
  • td 普通单元格
  • caption 表格的标题
  • thead 在逻辑上将表格层三个部分：表格头部
  • tbody 在逻辑上将表格层三个部分：表格的主体 注意：如果没有写tbody，浏览器运行时会自动加上tbody
  • tfoot 在逻辑上将表格层三个部分：表格的脚部

    属性

  • width 表格宽度
  • border 外边框的粗细
  • align 对齐方式：用在表格上：整个表格在父容器标签中居中用在tr：表格这一行内容居中用在td：这个单元格内容居中
  • rowspan 跨几行
  • colspan 跨几列
  • cellspacing 单元格之间的间距
  • cellpadding 单元格边框与内容之间的间距

表单标签

概述:

  • 接收用户输入数据，并提交数据给服务器

    属性

  • action 提交给服务器的地址
  • method 提交的方式

    表单数据要想提交必须满足两个要求

  • 必须使用form标签将表单项标签包起来
  • 表单项标签上必须有name属性
  1. <form action="register">
  2.     <table align="center">
  3.         <!--第1行-->
  4.         <tr>
  5.             <td style="background-color: lightcoral" align="center">用户名:</td>
  6.             <td>
  7.                 <input name="username" placeholder="请输入用户名"/>
  8.             </td>
  9.         </tr>
  10.         <!--第2行-->
  11.         <tr>
  12.             <td style="background-color: lightcoral" align="center">密码</td>
  13.             <td>
  14.                 <input name="password" type="password" placeholder="请输入密码"/>
  15.             </td>
  16.         </tr>
  17.         <!--第3行-->
  18.         <tr>
  19.             <td style="background-color: lightcoral" align="center">邮箱:</td>
  20.             <td>
  21.                 <input name="email" type="email" placeholder="请输入邮箱">
  22.             </td>
  23.         </tr>
  24.         <!--第4行-->
  25.         <tr>
  26.             <td style="background-color: lightcoral" align="center">性别:</td>
  27.             <td>
  28.                 <input name="sex" type="radio" value="1" checked="checked"/>男 &nbsp;&nbsp;
  29.                 <input name="sex" type="radio" value="0"/>女
  30.             </td>
  31.         </tr>
  32.         <!--第5行-->
  33.         <tr>
  34.             <td style="background-color: lightcoral" align="center">爱好:</td>
  35.             <td>
  36.                 <input name="hobby" type="checkbox" value="smoking"/>抽烟&nbsp;&nbsp;
  37.                 <input name="hobby" type="checkbox" value="drink"/>喝酒&nbsp;&nbsp;
  38.                 <input name="hobby" type="checkbox" value="Do a Perm"/>烫头&nbsp;&nbsp;
  39.             </td>
  40.         </tr>
  41.         <!--第6行-->
  42.         <tr>
  43.             <td style="background-color: lightcoral" align="center">学历:</td>
  44.             <td>
  45.                 <select name="edu">
  46.                     <option value="kindergarten">幼稚园</option>
  47.                     <option value="primary school">小学</option>
  48.                     <option value="junior high school">初中</option>
  49.                     <option value="senior high school">高中</option>
  50.                     <option value="university" selected="selected">大学</option>
  51.                     <option value="regular college course">本科</option>
  52.                     <option value="graduate student">研究生</option>
  53.                     <option value="master">硕士</option>
  54.                     <option value="doctor">博士</option>
  55.                     <option value="else">其他</option>
  56.                 </select>
  57.             </td>
  58.         </tr>
  59.         <!--第7行-->
  60.         <tr>
  61.             <td style="background-color: lightcoral" align="center">出生:</td>
  62.             <td>
  63.                 <input type="date" name="birthday" value="2000-01-01"/>
  64.             </td>
  65.         </tr>
  66.         <!--第8行-->
  67.         <tr>
  68.             <td style="background-color: lightcoral" align="center">照片:</td>
  69.             <td>
  70.                 <input type="file" name="photo" accept="image/png"/>
  71.             </td>
  72.         </tr>
  73.         <!--第9行-->
  74.         <tr>
  75.             <td style="background-color: lightcoral" align="center">个人简介:</td>
  76.             <td>
  77.                 <textarea name="intro" rows="5" cols="21">This guy was lazy and left nothing!</textarea>
  78.             </td>
  79.         </tr>
  80.         <!--第10行-->
  81.         <tr>
  82.             <td></td>
  83.             <td>
  84.                 <input type="submit" value="注册"/>
  85.                 <input type="reset"/>
  86.             </td>
  87.         </tr>
  88.     </table>
  89. </form>

CSS

CSS 导入 HTML有三种方式

  • 内联样式：在标签内部使用style属性，属性值是css属性键值对
    1. Hello
  • 内部样式：定义
  • 外部样式：定义link标签，引入外部的css文件
    1. <link rel=”stylesheet” href=“out.css”>`

选择器

  • 元素选择器
    • 元素名称{color: red;}
  • id选择器

    • id属性值{color: red;}

  • 类选择器
    • .class属性值{color: red;}

背景样式

  • 背景色 background-color
  • 背景图片 background-image
  • 平铺方式 background-repeat
  • 背景大小 background-size

文本样式

  • 颜色 color
  • 文本缩进 text-indent
  • 文本对齐 text-align
  • 设置大小 font-size
  • 设置样式 font-style
  • 设置粗细 font-weight