初始html5 (一)

1.HTML概述

1.1 什么是html

Hyper Text Markup Language 超文本标记语言

简单来说它就是制作网页的一门技术

超文本：具备普通文本的特性，同时还可以加入视频、图片、超链接等等；类比人与超人

标记语言：使用预定义好的标签来描述文本，交给浏览器解析完成超文本的效果

HTML5

它是万维网在2014年10月底发布一套规范，移动端与PC端无缝对接展示

编写更少的代码，展示更丰富的内容

1.2 书写规范

你可以使用记事本来进行写 html 也可以使用第三方软件进行编写

1. html文件扩展名为：html 或 htm 【系统历史问题 83格式】
2. 双标签：<开始>内容</结束>
3. 单标签：<开始/>
4. html语法不严谨，不区分大小写，建议小写
5. 标签内可以添加属性：属性名=“属性值” 单引号双引号都可以
6. 标签之间可以嵌套，但要正确嵌套

2. HTML标签

2.1 文本标签

  1）标题
    <hn></hn>
        n：1~6 数值越大，字体越小
        常见属性：
            align：对齐方式
                取值：left 左侧（默认）、center 中间、right 右侧  在html5中已经作废   推荐使用css样式
    2）字体
    <font></font> 在html5中已经作废  ---- span
        常见属性：
            size：大小
                取值：1~7 数值越大，字体越大 3（默认）
            color：颜色
                方式一：英文单词
                方式二【推荐】：光三原色，红(0~255)绿(0~255)蓝(0~255)；使用十六进制数 #12 34 5f
            face：类型
                取值：宋体、楷体、隶书等等
    3）粗体
    <b></b> bold
    4）斜体
    <i></i> italic
    5）换行
    <br/>
    6）水平线
    <hr/>
        常用属性：
            color：颜色
            size：大小 没有限制的
            width：宽度
                方式一：像素 px（默认）
                方式二：百分比 % （随着当前浏览器窗口大小进行缩放）
           align：对齐方式
                   取值：center（默认）
    7）段落
        <p></p>
            常用属性：
                align：对齐方式  

2.2 超文本连接

超链接
   <a></a>
       常用属性：
           href：跳转到新页面
               相对路径（网站内部跳转）
                   ./ 当前目录 省略不写
                   ../ 上级目录
               绝对路径（网站外部跳转）
                   http://www.itcast.cn
               mailto:发送邮件的
               subject：邮件主题
               body：邮件内容
           target：打开方式
               取值：_self自身页面跳转（默认）、_blank 打开新页面
            title：鼠标上移显示标题

2.3列表标签

列表
        有序列表
        <ol></ol>
            常用属性：
                type：排序类型
                    取值：1（默认） i I（罗马字符） a A
        无序列表
        <ul></ul>
            常用属性：
                type：显示类型
                    取值：disc 实心圆（默认）、circle 空心圆、square 实心方块
        共同子标签
        <li></li>

2.4 图像标签

 img table 快捷键
    图像
    <img/>
        常用属性：
            src：图像文件地址
                相对路径（内部图片）
                绝对路径（百度图片）
            alt：图片丢失时显示的问题
            width：宽度 注意：我们在设置宽度时，高度会自动缩放（纵横比）
            height：高度
            title:鼠标上移显示的标题

2.5 块级标签和内联标签

 html标签分为二大类
        块级标签
            特性：独自占用一行
            例如：h3  div 语义化标签 段落 列表
        内联标签（行内标签）
            特性：内容有多少占用多少，在一行内显示
            例如：font span img 超链接
       预习：所有标签都有共同的属性 style用来设置 css样式
       style="background-color: orange" 设置标签的背景色

2.6 表格标签

 表格
    <table></table>
        常用属性：
            border：边框
            width：宽度
            height：高度
            align：对齐方式
                left（默认）
            cellspacing： 单元格和单元的间距，一般我们设置为0
            cellpadding：单元格和内容的间距，一般我们设置为0
    行
    <tr></tr>
        常用属性：
            align：内容对齐方式
            bgColor:背景颜色
    单元格
    <td></td>
        常用属性：
            rowspan：行的合并
            colspan：列的合并
    <th></th> 列标题 特点：（粗体、居中）
    表格标题
    <caption></caption>

    语义化标签
    <thead></thead> 头部
    <tbody></tbody> 身体
    <tfoot></tfoot> 尾部