前端之html

背景知识

静态网页：不能和用户进行交互。

动态网页：可以和用户进行交互。

网页由3部分组成：结构（HTML）、表现（CSS）和行为（JavaScript）。

 

一、Head标签

1. http-equiv属性

<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

 

2. name

用于页面的关键字和描述，主要是为了SEO优化。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="路飞学城">

 

3. 其他标签

<!--标题-->
<title>路飞学城</title>
<!--icon图标（网站的图标）-->
<link rel="icon" href="fav.ico">
<!--定义内部样式表-->
<style></style>
<!--引入外部样式表文件-->
<link rel="stylesheet" href="mystyle.css">
<!--定义JavaScript代码或引入JavaScript文件-->
<script src="myscript.js"></script>

二、body标签

1. 标题标签

标题标签需要注意的：不要利用标题标签来改变同一行中的字体大小

 

2. a标签（内联标签，设置宽高不起作用）

target：_blank 在新的网站打开链接的资源地址。

title: 表示鼠标悬停时显示的标题

重点：target：_self 默认值 在当前网站打开链接的资源地址

<a href="./a.zip">下载压缩包</a>

<a href='mailto:123@163.com'>联系我们</a>

<a href="#p1">跳转到顶部</a>  <!-- p1是id -->

<!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码-->
<a href="javascript:alert()">内容</a>

<!-- javascript:;表示什么都不执行，这样点击<a>时就没有任何反应 -->
<a href="javascrip:;">什么都不执行</a>

3. 文本修饰标签

1. <b></b>：加粗
2. <i></i>：斜体
3. <u></u>：下划线
4. <s></s>：删除线
5. <sup></sup>：上标 
6. <sub></sub>：下标

4. 列表标签

ol标签的属性：

type：列表标识的类型

• 1：数字

• a：小写字母

• A：大写字母

• i：小写罗马字符

• I：大写罗马字符

<ul type="circle">
    
<ol type="a">

 

5. img标签

1. 可设宽高

2. 在一行内显示

3. 叫做行内块标签

6. span标签

单独对一个东西进行修改的时候用

7. 其他标签

换行标签 <br>

分割线 <hr>

内容	代码
空格	 
>	>
<	&lt;
&	&amp;
¥	&yen;
版权	&copy;
注册	&reg;

HTML特殊符号对照表

8. table标签

表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

表格行和列的合并

rowspan 合并行(竖着合并) colspan 合并列(横着合并)

<table border="1" cellspacing="0">  <!-- cellspacing代表间隙 -->
    <thead>

    <tr> <!-- 表格主体的内一行 -->
        <th>上午</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td rowspan="3">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>生物</td>
        <td>化学</td>
    </tr>

    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>生物</td>
        <td>化学</td>
    </tr>

    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>生物</td>
        <td>化学</td>
    </tr>

    <tr>
        <td rowspan="2">下午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>生物</td>
        <td>化学</td>
    </tr>

    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>生物</td>
        <td>化学</td>
    </tr>
    </tbody>

    <tfoot>
        <tr>
            <td colspan="6">课程表</td>
        </tr>
    </tfoot>
</table>

9. Form标签（经常使用）

图片下载到了blog里面，写博客的时候补上

from标签是一个块级元素*

enctype取值

application/x-www-form-urlencoded：在发送前编码所有字符（默认）

multipart/form-data：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

text/plain：空格转换为 "+" 加号，但不对特殊字符编码。

 

如果有文件需要提交到服务器，method必须为POST，enctypr必须为multipart/form-data

 

三、标签分类

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

常用的块状元素：

<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

常用的行内元素

<a> <span> <br> <i> <em> <strong> <label>

常用的行内块状元素：

<img> <input>

块级元素特点：display:block;

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素特点：display:inline;

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素的特点：display:inline-block;

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置

 

四、嵌套规则

块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素。

<div><div></div><h1></h1><p><p></div> ✔️
<a href=”#”><span></span></a> ✔️
<span><div></div></span> ❌

块级元素不能放在p标签里面。

<p><ol><li></li></ol></p> ❌
<p><div></div></p> ❌

有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素。

h1、h2、h3、h4、h5、h6、p

li元素可以嵌入ul，ol，div等标签