HTML使用_html src 上级-CSDN博客

本文链接：https://blog.csdn.net/ParkJiYeon_/article/details/120694578

html简介

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

用于编写页面，搭建页面的结构

基本结构

<!DOCTYPE html> 文档类型声明 表明是HTML5版本
<html>   根标签
    <head> 头部（不可见）
        <meta charset="UTF-8"> 元标签 设置字符编码
        <title>标题内容</title> 标题
    </head>
    <body> 主体（可见）
        标签
    </body>
</html>

注意：

不区分大小写
标签不能随便写
有的标签是成对的<标签>...</标签> <标签/>

有的不成对 meta、 img

常用标签

按显示方式分为：

行内标签

多个标签可以在一行显示

块标签

每个标签单独占一行

按作用分为：

标题标签
段落标签
div标签
无序列表
有序列表
超链接
图片
表格
表单
内嵌框架

标题标签

从大到小分为h1~ h6

<h1>这是1级标题</h1>
<h2>这是2级标题</h2>
<h3>这是3级标题</h3>
<h4>这是4级标题</h4>
<h5>这是5级标题</h5>
<h6>这是6级标题</h6>

段落标签

单独占一行，用于文字段落

<p>这是一个段落</p>

span标签

用于标记一部分文字，对文字设置特殊的效果，一般和css配合使用

<p>我们今天学习HTML，大家加油！！学好做<span style="font-size: 50px">全栈</span>工程师！！</p>

div标签

用于布局，将网页分为多个区域，设置区域的大小和位置等，和CSS配合

无序列表

效果：

语法：

<!--无序列表-->
<ul>
    <li>土豆烧肉</li>
    <li>清炒小白菜</li>
    <li>红烧鱼</li>
    <li>烤鸡</li>
</ul>

有序列表

效果：

<!--有序列表-->
<p>这是前端的知识点</p>
<ol>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
    <li>jquery</li>
    <li>ajax</li>
    <li>vue</li>
</ol>

目录列表

标题和文字有缩进效果

dl+dt+dd

<dl>
    <dt><del>这是标题</del></dt>
    <dd>这是<br>文字</dd>
    <dd>这是<i>文字</i></dd>
    <dd>这是<b>文字</b></dd>
    <dd>这是<u>文字</u></dd>
</dl>

超链接

超链接可以跳转到其它的页面、图片、文件

语法：

<a href="链接的路径">超链接的文字</a>

路径分为：

相对路径

相对当前页面的路径

主要用于链接网站内部的资源
绝对路径

完整的资源路径

百度一下，你就知道

主要用于链接外部网站的资源

<!--跳转上级目录-->
<a href="../test2.html">链接test2</a>
<!--相对路径的超链接-->
<a href="test/hello.html">相对路径跳转hello</a>
<!--绝对路径的超链接-->
<a href="http://www.baidu.com">绝对路径跳百度</a>

练习：目录中有三个页面：

a.html

test1/test2/b.html

test3/c.html

实现相对路径：

a 跳转 b和c test1/test2/b.html test3/c.html

b 跳转 a和c ../../a.html ../../test3/c.html

c 跳转 a和b ../a.html ../test1/test2/b.html

target属性

指定跳转的目标

值：

_blank 在新窗体打开
_self 当前页面打开默认
_top 在顶层窗体打开
_parent 在父窗体打开

锚链接

可以跳转到页面中任意的位置

用法：

在要跳转的位置，定义锚链接
```
<a name="top"></a>
```
使用超链接跳转锚链接
```
<a href="#top">回到顶部</a>
```

图片

图片的显示

<img src="图片路径" alt="提示文字" title="提示文字">

表格

作用：

用于布局
显示数据

语法：

<table border="边框宽度" width="宽度">   表格
	<tr>  行
		<th></th>  列头
		<th></th>
		<th></th>
	</tr>
	<tr align="left|right|center">  
		<td align="left|right|center"></td>  列
		<td></td>
		<td></td>
	</tr>
	...
</table>

宽度单位：

像素 10px

百分比 10%

<table border="1px" width="50%">
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
        <tr align="center">
            <td>张三</td>
            <td>60</td>
            <td align="right">70</td>
            <td>99</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>55</td>
            <td>77</td>
            <td>88</td>
        </tr>
    </table>

单元格的合并

td的属性：

rowspan 跨行

colspan 跨列

跨行跨列的单元格
<table border="1px" width="400px">
    <tr>
        <td colspan="4">xxx</td>
    </tr>
    <tr>
        <td rowspan="3">xxx</td>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
    </tr>
    <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
    </tr>
    <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
    </tr>
</table>

表单

收集用户的信息

语法

<form action="服务器的地址" method="提交方法">
	表单元素
</form>

提交方法：

get 数据会和url一起提交，安全性较差，长度有限，速度较快，一般用简单的查询
post 数据会单独提交，安全性更高，长度没限制，速度较慢，一般用于敏感数据的操作

表单元素

语法

<input type="类型" name="参数名称" value="值" maxlength="最大长度" placeholder="提示文字">

类型：

- text 单行文本框
- password 密码框
- radio 单选按钮 （同名一组，设置不同的值）
- checkbox 复选框（checked=true 默认选中）
- file 文件域
- hidden 隐藏域（用于提交用户不能修改的数据）
- submit 提交按钮
- reset 重置按钮
- button 普通按钮

下拉菜单

select

<select name="名字">
	<option value="值" selected="是否选中">选项文字</option>
	....
</select>

文本域

textarea

<textarea name="名字" cols="列数" rows="行数">
</textarea>

内嵌框架

将一个页面嵌入到另一个页面中

iframe

<iframe src="路径" name="名称" width="宽度" height="高度" frameborder="边框宽度" scrolling="是否滚动 no|yes"></iframe>

子页面和父页面的跳转

父页面跳转子页面

父页面中子页面的超链接跳转到iframe中

给父页面iframe设置名字
给父页面中的超链接设置target="iframe的名字"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父页面</title>
</head>
<body>
    <a href="1.html" target="hello">页面1</a>&nbsp;&nbsp;&nbsp;
    <a href="2.html" target="hello">页面2</a>&nbsp;&nbsp;&nbsp;
    <a href="3.html" target="hello">页面3</a>&nbsp;&nbsp;&nbsp;
    <iframe src="1.html" name="hello" height="300px" width="1000px" frameborder="0px" scrolling="no"></iframe>
</body>
</html>