学习笔记：前端Web开发HTML5+CSS3+移动web（day2）

标题标签：h1~h6(双标签）

显示特点：

        文字加粗

        字号逐渐减小

        独占一行（换行）

h1标签在一个网页只能使用一次，用来放新闻标题或者网页的logo

其他没有限制

段落标签：p（双标签）

显示特点：

独占一行

段落之间存在间隙

换行：<br>(单标签）

水平线：<hr>(单标签）

浏览器不识别回车键换行

文本格式化标签：

        作用是为文本添加特殊格式 ，以突出重点。常见的文本格式：加粗，倾斜，下划线，删除线

strong  加粗（同b）

em  倾斜（i）

ins   下划线（u）

del  删除线（s）

图像标签：

        作用是在网页插入图片

        src用于指定图像更多位置和名称，是img的必须属性

图片具有的属性：

1.alt：替换文本——图片无法显示的时候显示的文字

2.title： 提示文本——鼠标悬停在图片上面的时候显示的文字

3.width

4.height（以上二者一般在css上设置）

<img src="./cat.jpg" alt="替换文本" title="提示文本">

路径：使得网页可以在任意位置找到图片

        路径指的是查找文件的时候，从起点到终点经历的路线

相对路径：从当前文件位置出发查找目标文件

绝对路径：从盘符出发查找目标文件

/表示进入到某个文件夹里面    eg.文件夹名字/

.表示当前文件所在的文件夹        eg.  ./

./进入当前文件夹

../表示进入了上一级文件夹

.../表示进入了上上一级文件夹

超链接：

        作用是点击跳转其他页面

href属性值是跳转地址，是超链接的必须属性

<a href="https://www.baidu.com/">跳转到百度</a>
    <!-- 跳转到本地文件，相对路径查找 -->
    <a href="./umi.jpg" target="_blank">跳转到umi图片</a>
    <!-- 原来的网页还不想丢失，就target加_blank -->
     <a href="#">空链接</a>

target="_blank"实现在新窗口跳转页面

空链接用于开发初期还不知道要跳转到哪里的时候，这是让href属性为#空链接

音频/视频：

列表

        使得布局内容排列整齐

分类：无序列表、有序列表、定义列表

无序列表：ul嵌套li

有序列表：ol嵌套li

ol    ul里面只能包裹li，要想加内容在li里面加 

dl        里面包裹dt标题，dd下级                                                

<ul>
        <li>列表条目1</li>
        <li>列表条目2</li>
        <li>列表条目3</li>
        <!-- 显示特点：独占一行，并且ul里面只能有li标签 -->
    </ul>

    <ol>
        <li>step1</li>
        <li>step2</li>
        <li>step3</li>
    </ol>

    <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>售后政策</dd>
    </dl>

表格（table）

tr：行(table row

th：表头单元格(table head

td：内容单元格(table details

提示：在网页中，表格默认没有边框线，用broder属性可以为表格添加边框线

 

<table border="1">
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>总分</th>

        <tr></tr>

        <td>jerry</td>
        <td>100</td>
        <td>99</td>
        <td>98</td>
        <td>397</td>

        <tr></tr>
        <td>summary</td>
        <td>nb</td>
        <td>nb</td>
        <td>nb</td>
        <td>nb</td>
    </table>

注意表格结构标签只是方便看注释，并没有实际效果

合并单元格：

        将多个单元格合并为一个单元格，以合并同类信息

<tbody>
            <tr>
                <td>jerry</td>
                <td rowspan="2">100</td>
                <td>99</td>
                <td>98</td>
                <td>397</td>
            </tr>
    
            
    
            <tr>
                <td>Tom</td>
                <td>97</td>
                <td>100</td>
                <td>397</td>
            </tr>
    
        </tbody>
        
        <tfoot>
            <tr>
                <td>summary</td>
                <td colspan="4">nb</td>
            </tr>
        </tfoot>

表单收集用户信息

input标签基本使用

input标签type属性值不同，则功能不同