html笔记

最新推荐文章于 2022-09-16 08:46:14 发布

机智的九五二七

最新推荐文章于 2022-09-16 08:46:14 发布

阅读量63

点赞数

本文链接：https://blog.csdn.net/qq_34966446/article/details/105057088

版权

互联网的三大基石：

统一资源定位符（URL，Uniform Resource Locator）定位资源
超文本传输协议（HTTP，HyperText Transform Protocol）传输资源
超文本标记语言（HTML，HyperText Markup Language）显示资源

标签：<双标签></双标签> <单标签/>

<!DOCTYPE>网页声明，声明必须是 HTML 文档的第一行，位于 <html> 标签之前。告知浏览器文档使用哪种 HTML规范

<html> 标签定义浏览器这是一个 HTML 文档，是 HTML 文档中最外层的元素

<head> 标签定义关于文档的信息,包含的标记是页面的标题、序言、说明等内容,不作为内容来显示，但影响网页显示的效果

<title> 标签定义文档的标题，在所有 HTML 文档中是必需的，但不能有一个以上的 <title> 元素

http-equiv="content-type" content="text/html;charset=utf-8" 网页编码设置

http-equiv="Refresh" content="5;url=http://www.baidu.com" 网页自动跳转

http-equiv="expires" content="Mon, 20 Jul 2009 23:00:00 GMT" 网页失效设置

http-equiv=”Cache-Control” content=”max-age=7200″ 页面缓存设置

name="keywords" content="sbsbsbsb" 网页关键字

name="description" content="网页内容描述" 网页描述

name="author" content="Mr.liu" 网页作者

<body> 标签定义文档的主体

<h1> - <h6> 标签定义 HTML 标题（块级元素）

<p> 标签定义定义段落（忽略空格，块级元素）

<br> 标签定义插入一个简单的换行符

<hr> 标签定义一条水平线，被用来分隔 HTML 页面中的内容

注释：用于在源代码中插入注释，注释不会显示在浏览器中

&nbsp 空格符

表单：

<form> 标签定义创建供用户输入的 HTML 表单

action属性：规定发送数据的网址表单数据以?隔开拼接在URL后，不同的键值对使用&隔开，不安全。

method属性：规定如何发送表单数据

<input> 标签定义用户可以在其中输入数据的输入字段，输入字段可通过多种方式改变，取决于 type 属性

type：text单行文本 password密码 submit提交 radio单选按钮 checkbox复选框 button按钮 file文件

<textarea> 标签定义一个多行的文本输入控件

<select> 标签定义用来创建下拉列表

<option> 标签定义下拉列表中的一个选项

<label> 标签定义为 input 元素定义标注

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单练习</title>
    <!--
        form表单：表示提交一个表单数据给相应的地址
            action:设置地址 把表单中设置了name属性的输入框的值传输回去
            method：get post
        每个标签都有自己的属性。
            属性设置：属性名="值"
        input   type:   text单行文本框    password密码框    checkbox复选框
                        radio单选框   设置name属性为相同值 submit提交
                        button按钮      file上传文件
                        reset   color   datetime
                textarea多行文本    select下拉框   设置option便签填充内容

    -->
</head>
<body>
    用户登录
    <form action="https://www.baidu.com/s" method="get">
        用户名：<input type="text" name="username" placeholder="用户名设置成功后不可修改"/><br>
        密码: <input type="password"><br>
        爱好：唱 <input type="checkbox"> 跳<input type="checkbox"> rap<input type="checkbox"> 打篮球 <input type="checkbox"><br>
        性别：男<input type="radio" name="gender">女<input type="radio" name="gender"><br>
        <input type="checkbox">记住密码 <br>
        上传文件：<input type="file"><br>
        颜色：<input type="color"><br>
        年龄：<input type="number"><br>
        出身日期：<input type="date"><br>
        学历：<select name="xl">
            <option value="gz">高中</option>
            <option value="dz">大专</option>
            <option value="bk">本科</option>
            <option value="ss">硕士</option>
            <option value="bs">博士</option>
        </select><br>
        个人简介：<textarea></textarea><br>
        <input type="submit" value="登录">
        <input type="button" value="按钮" onclick="alert('再点就坏了')">
    </form>
</body>
</html>

框架：

<frameset> 标签定义一个框架集

<frame> 标签定义 frameset 中的一个特定的窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        内联框架：iframe     src导入其他页面资源
        框架集：frameset    内部标签    frame
                cols    rows
    -->
</head>
<frameset rows="300px,*">
    <frame src="../day1/table.html" noresize="true"/>
    <frameset cols="15%,*">
        <frame src="../day1/ulAndOl.html">
        <frame src="../day1/tableMove.html">
    </frameset>
</frameset>
</html>

图像：

<img> 标签定义 HTML 页面中的图像，两个必需的属性：src 和 alt（行内元素）

相对路径：从当前文件出发，查找另一个文件所需的路径

绝对路径：从根盘符出发，查找另一个文件所需路径

链接：

<a> 标签定义超链接，用于从一个页面链接到另一个页面。（行内元素）

href 属性：要跳转网页的资源路径

本地资源：相对路径

网络资源：URL

target属性：要跳转网页的位置

_self：在当前页显示

_blank：在新的页面显示

_top：在顶层页面显示

_parent：在父级页面显示

锚点：

同一页面不同位置跳转

1.指定锚点 <a name="锚点名"></a>

2.跳转标签 <a href="#锚点名">访问方式</a>

回到顶部 <a href="#">顶部</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        img：标签显示一张图片
            src图片地址 alt提示图片内容   title标题内容
        a：标签超链接,访问新的地址链接
            target:_self本页面打开   _blank新建页面打开

           锚点：定点到页面的某个位置
           href设置#  返回页面顶部
           设置#name属性值   跳转指定位置
    -->
</head>
<body>
    <img src="img/2.gif" alt="这是一只猫" title="图片是猫">
    <a href="https://news.baidu.com/" target="_blank" title="百度的新闻">新闻</a><br>
    <a href="https://www.baidu.com/s?wd=今日新鲜事" name="bd" target="_blank"><img src="img/bd_logo.png"></a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="#">回到顶部</a>
    <a href="#bd">回到百度图片</a>
</body>
</html>

<table> 标签定义 HTML 表格

<tr> 标签定义 HTML 表格中的行

<th> 标签定义 HTML 表格中的表头单元格

<td> 标签定义 HTML 表格中的标准单元格

rowspan跨行 colspan跨列

样式/节：

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分

<span> 标签定义对文档中的行内元素进行组合

程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        table标签：展示表格
            tr：行
            td：列
            th：表头，只能在第一个tr中使用，有加粗，居中的功能
    -->
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="5px" style="width: 100%">
        <tr>
            <th rowspan="3">1-1</th>
            <th colspan="2">1-2</th>
        </tr>
        <tr>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-2</td>
            <td>3-3</td>
        </tr>
    </table>
</body>
</html>

机智的九五二七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html笔记

互联网的三大基石：统一资源定位符（URL，Uniform Resource Locator）定位资源超文本传输协议（HTTP，HyperText Transform Protocol）传输资源超文本标记语言（HTML，HyperText Marku...
复制链接

扫一扫

html笔记

“相关推荐”对你有帮助么？