前端web：一、Html

Bertha 。 2023-10-04 19:27 50阅读 0赞

### 一、web标准的构成 ###

#### 1.1为什么需要web标准？ ####

web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！

#### 1.2Web标准的构成 ####

结构（html）、表现（css）、行为（javascript）

### 二、基本结构标签 ###

html：网页的整体

head：网页的头部

body：网页的身体

title：网页的标题

### 三、常用的html标签 ###

#### 3.1html标签的结构 ####

标签名、双标签、开始标签、结束标签、单标签

#### 3.2标签的属性 ####

1.写在标签内部

2.可以有多个属性

3.以空格隔开

4.标签名与属性之间必须以空格隔开

5.属性之间没有顺序之分

#### 3.3常用标签 ####

1.**标题标签**

普通的文字 
        <h1>我是1级标题</h1> 
        <h2>我是2级标题</h2> 
        <h3>我是3级标题</h3> 
        <h4>我是4级标题</h4> 
        <h5>我是5级标题</h5> 
        <h6>我是6级标题</h6>

2.**段落标签**

<h1>前端开发</h1> 
    <p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以 及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互</p> 
    <p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作 是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览 为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强 大。</p> <p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛 应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>

3.**换行标签**

<h1>前端开发</h1> 
    <p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以 及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互</p> 
    <p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是 Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为 主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。 </p><p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。<br>HTML5，Node.js的广 泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>

4.**水平线标签**

<h1>前端开发</h1> 
        <hr>
        <p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互</p> <p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作 是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览 为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强 大。</p> 
        <p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。<br> HTML5，Node.js 的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>

**5.\***\*文本格式化标签\*\*

<b>加粗</b> 
    <u>下划线</u> 
    <i>倾斜</i>
    <s>删除线</s>
    <br> 
     
    <strong>加粗</strong> 
    <ins>下划线</ins>
    <em>倾斜</em> 
    <del>删除线</del>

**6.\***\*图片标签\*\*

<img src="cat.gif" alt="这是一只摇头猫" title="震惊！小猫咪竟然会干这种事？">
            <h1 title="这是一个h1标签">我是一个一级标题</h1>

7.**媒体标签**

8.**链接标签**

<a href="https://www.baidu.com/" target="_blank">点击之后去百度网页</a> <a href="./15-视频标签.html" target="_blank">点击之后去刚刚书写的视频网页</a>

#### 四、 **路径的使用** ####

**1.\***\*相对路径\*\*

相对路径：从**当前文件开始**出发找目标文件的过程

同级目录：直接写：目标文件名字！ 
    下级目录：直接写：文件夹名/目标文件名字！ 
    上级目录：直接下：../目标文件名字！

**2.\***\*绝对路径\*\*（了解）

指目录下的绝对位置，可直接到达目标位置，通常**从盘符开始**的路径

盘符开头：D:\day01\images\1.jpg 完整的网络地址：https://www.baidu.com/2018czgw/images/logo.gif

#### 五、标签 ####

没有语义的布局标签 div和pan

Ø 场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签

Ø div标签：一行只显示一个（独占一行）

Ø span标签：一行可以显示多个

有语义的布局标签----html5标签

Ø 场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

header\\nav\\footer\\aside\\section\\article

#### 六、列表与表格 ####

6.1列表

1.无序列表（常用）

Ø 场景：在网页中表示一组无顺序之分的列表，如：新闻列表。

Ø 标签组成ul , li

<ul>
        <li><p>我也是一个p标签</p> </li>
        <li>榴莲</li> 
        <li>香蕉</li> 
        <li>苹果</li> 
        <li>哈密瓜</li> 
        <li>火龙果</li>
    </ul>

**2**. **有序列表**

Ø 场景：在网页中表示一组有顺序之分的列表，如：排行榜。

Ø 标签组成:ol , li

<h1>成绩排行榜</h1>
    
     
    <ol>
        <li>小姐姐：100分</li> 
        <li>小帅哥：80分</li> 
        <li>小可爱：60分</li> 
    </ol>

6.2表格

Ø 场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表

Ø 基本标签： table+tr+td

Ø 注意点：

• 标签的嵌套关系：table > tr > td

Ø 常见相关属性:border,width,height,caption,th

<table> 
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr> 
        <tr>
            <td>小哥哥</td> 
            <td>100分</td>
            <td>小哥哥真帅气</td> 
        </tr> 
        <tr>
            <td>小姐姐</td>
            <td>100分</td> 
            <td>小姐姐真漂亮</td>
        </tr> 
        <tr>
            <td>总结</td>
            <td>郎才女貌</td> 
            <td>郎才女貌</td>
        </tr> 
    </table>

**Ø** **合并单元格**

1.  明确合并哪几个单元格
2.  通过左上原则，确定保留谁删除谁
3.  给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
    
        <table border="1" width="300" height="300"> 
        <caption>
            <h3>学生成绩单</h3>
        </caption> 
        <tr>
            <th>姓名</th>
            <th>成绩</th> 
            <th>评语</th>
        </tr>
        <tr>
            <td>小哥哥</td>
             <td rowspan="2">100分</td>
            <td>小哥哥真帅气</td> 
         </tr>
         <tr>
            <td>小姐姐</td> 
              
            <td>小姐姐真漂亮</td>
        </tr>
        <tr>
            <td>总结</td> 
             <td colspan="2">郎才女貌</td>
             
        </tr> 
        </table>
    
    #### 七、表单 ####
    
    场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
    
    7.1 input系列标签
    
    Ø标签名：input
    
    • input标签可以通过type属性值的不同，展示不同效果
    
    Øtype属性值： text,password,radio,checkbox,file,submit,reset,button

**select\***\*下拉菜单标签\*\*

Ø 场景：在网页中提供多个选择项的下拉菜单表单控件

Ø 标签组成：

select标签：下拉菜单的整体

option标签：下拉菜单的每一项

Ø 常见属性：

selected：下拉菜单的默认选中

**textarea文本域标签**

Ø 场景：在网页中提供可输入多行文本的表单控件

Ø标签名：textarea

Ø 常见属性：

label标签