• HTML基础

    网页的构成：

    HTML：用于搭建基础网页，展示页面的内容 （结构）

    CSS：用于美化页面，布局页面（表现）

    JavaScript：控制页面的元素，让页面有一些动态的效果（行为）

    1.HTML的概述

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

    超文本：超越了文本的限制，比普通文本更加强大。除了文字信息，还可以定义图片，音频，视频等内容

    标记：就是标签。可以使用一系列的标签，将网络是的文档格式统一，使分散的资源连接为一个逻辑整体

    HTML的组成：

    HTML页面是由一系列的元素（Element）组成的，而元素是通过标签创建出来的

    2.快速入门

    1.新建文本文件，后缀名改为.html


    2.编写HTML结构标签

    1. <html>
    2. <head>
    3. 	<title>title>
    4. head>
    5. <body>
    6. 	
    7.  
    8. body>
    9. html>


    3.在中定义文字

    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="utf-8">
    5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 	<title>html 快速入门title>
    7. head>
    8. <body>
    9. 	我真帅
    10.  
    11. body>
    12. html>

    改为红色：

    <font color="red">我真帅font>

    html:html文档的根标签

    head：头标签。用于指定html文档的一些属性。引入外部的资源

    title：标题标签，显示在浏览器标签上。

    body：身体标签，包含所有的文档内容

    ：html5中定义该文档是html文档

    3.基础标签

    例：

    2. html>
    3. <html lang="en">
    4. <head>
    5.     
    6.     <meta charset="UTF-8">
    7.     <title>Titletitle>
    8. head>
    9. <body>
    10. <h1>我是标题 h1h1>
    11. <h2>我是标题 h2h2>
    12. <h3>我是标题 h3h3>
    13. <h4>我是标题 h4h4>
    14. <h5>我是标题 h5h5>
    15. <h6>我是标题 h6h6>
    16. <hr>
    18. <font face="楷体" size="5" color="#ffc0cb">我真帅font>
    19. <hr>
    20. 再给我两分钟，<br>让我把记忆结成冰
    21. <p>
    22. 别融化了眼泪，你妆都花了要我怎么记得
    23. p>
    24. <p>
    25. 记得你叫我忘了吧，记得你叫我忘了吧
    26. p>
    27. <hr>
    28. <center>
    29.   <b>你说你会哭不是因为在乎b>
    30. center>
    31. body>
    32. html>

     

    4.图片音频视频标签

    1.图片音频视频标签

    img：定义图片
        src：规定显示图像的URL（统一资源定位符）
        height：定义图像的高度
        width：定义图像的宽度
    audio：定义音频。支持音频格式：MP3，WAV，OGG
        src：规定音频的URL
        controls：显示播放控件
    video：定义视频。支持的音频格式：MP4，WebM，OGG
        scr：规定视频的URL
        controls：显示播放控件 

    2.尺寸单位

    px和%

    3.路径

    绝对路径和相对路径

    例：

    5.超链接标签

    href：指定访问资源的URL
    target：指定打开资源的方式
        _self：默认值，在当前页面打开
        _blank：在空白页面打开 

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <a href="https://www.bilibili.com" target="_blank">点我有惊喜哦a>
    9. body>
    10. html>

    6.列表标签 

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.  
    9. <ol type="A">
    10.   <li>咖啡li>
    11.   <li>茶li>
    12.   <li>牛奶li>
    13. ol>
    14.  
    15. <ul type="circle">
    16.   <li>咖啡li>
    17.   <li>茶li>
    18.   <li>牛奶li>
    19. ul>
    20. body>
    21. html>

    7.表格标签

    table：定义表格
        border：规定表格边框的宽度
        width：规定表格的宽度
        cellspacing：规定单元格直接的空白
    tr：定义行
        align：定义表格行的内容对齐方式
    td：定义单元格
        rowspan：规定单元格可横跨的行数
        colspan：规定单元格可横跨的列数 

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <table border="1" cellspacing="0" width="500">
    9.   <tr>
    10.     <th>序号th>
    11.     <th>品牌logoth>
    12.     <th>品牌名称th>
    13.     <th>企业名称th>
    14.   tr>
    15.   <tr align="center">
    16.     <td>010td>
    17.     <td><img src="../img/OIP-C (1).jpg" width="60" height="60">td>
    18.     <td>藤原拓海td>
    19.     <td>藤原拓海td>
    20.   tr>
    21.   <tr align="center">
    22.     <td>009td>
    23.     <td><img src="../img/OIP-C (2).jpg" width="50" height="60">td>
    24.     <td>高桥凉介td>
    25.     <td>高桥凉介td>
    26.   tr>
    27.   <tr align="center">
    28.     <td>008td>
    29.     <td><img src="../img/OIP-C (3).jpg" width="60" height="50">td>
    30.     <td>夏树td>
    31.     <td>夏树td>
    32.   tr>
    33. table>
    34. <br>
    35. <hr>
    36. <br>
    37.  
    38. <table border="1" cellspacing="0" width="500">
    39.   <tr>
    40.  
    41.     <th colspan="2">品牌logoth>
    42.     <th>品牌名称th>
    43.     <th>企业名称th>
    44.   tr>
    45.   <tr align="center">
    46.     <td>010td>
    47.     <td><img src="../img/OIP-C (1).jpg" width="60" height="60">td>
    48.     <td>藤原拓海td>
    49.     <td>藤原拓海td>
    50.   tr>
    51.   <tr align="center">
    52.     <td rowspan="2">009td>
    53.     <td><img src="../img/OIP-C (2).jpg" width="50" height="60">td>
    54.     <td>高桥凉介td>
    55.     <td>高桥凉介td>
    56.   tr>
    57.   <tr align="center">
    58.     
    59.     <td><img src="../img/OIP-C (3).jpg" width="60" height="50">td>
    60.     <td>夏树td>
    61.     <td>夏树td>
    62.   tr>
    63. table>
    64. body>
    65. html>

      

    8.布局标签

    例： 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.  
    9. <div>我是divdiv>
    10. <div>我是divdiv>
    11.  
    12. <span>我是spanspan>
    13. <span>我是spanspan>
    14. body>
    15. html>

    9.表单标签

    表单：在网页中主要负责数据采集功能，使用

    标签定义表单
    表单项（元素）：不同类型的input元素，下拉列表，文本域等

    form：定义表单
        action：规定当提交表单时向何处发送表单数据，URL
        method：规定用于发送表单数据的方式
            get：浏览器会将数据直接附在表单的action URL之后。大小有限制
            post：浏览器会将数据放到http请求消息体中。大小无限制 

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    9. <form action="#">
    10.   <input type="text" name="username">
    11.   <input type="submit">
    12. form>
    13. body>
    14. html>

    10.表单项标签

    ：表单项，通过type属性控制输入形式