Web基础 HTML基础简单内容 -＞（个人学习记录笔记）

最新推荐文章于 2024-01-11 20:25:21 发布
最新推荐文章于 2024-01-11 20:25:21 发布
阅读量411 收藏 4
点赞数
分类专栏： 基础 文章标签： html web html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Slience_me/article/details/111883254
版权

文章目录

HTML5

第一个网页

<!-- 文档声明 ： html5文档 -->
<!DOCTYPE html>
<!-- 当前网页的语言是英文，默认不指定是中文=> lang='zh'-->
<!-- 一般不用指定成en语言-->
<html lang="en"> 
    <head>
    <!-- 指定网页的编码格式 -->
    <meta charset="UTF-8">
    <!-- 在移动设备浏览网页时，网页不缩放 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 在ie浏览器浏览网页时，使用ie的最高版本-->
    <meta http-equiv="X-UA-Compatible" content="ie-enge">
	<title>Document</title>
    </head>
    <body>
        <!-- html语言里边的注释快捷键：windows： ctrl + /  -->
          hello
    </body>
</html>

1. 常见的html标签

<!--1、成对出现的标签-->
<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这是一个段落标签</p>

<!--2、单个出现的标签-->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>

<!--3、带属性的标签，如src、 alt 和 href 等都是属性-->
<img src="images/pic.jpg" alt="图片">   <!--src="资源路径"-->
<a href="http://www.baidu.com">百度网</a>

<!--4、标签的嵌套-->
<!--div容器标签-->
<div>
	<img src="images/pic.jpg" alt="图片">
	<a href="http://www.baidu.com">百度网</a>
</div>

总体标签大全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 双标签：成对出现的标签 -->
    <h1>标题标签</h1>
    <h1>标题一共六级选，</h1>
    <h2>文字加粗一行显。</h2>
    <h3>由大到小依次减，</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>
    <div>我是一个容器标签，可以包裹其他标签内容</div>
    <p>我说一个段落标签</p>
    <p>我说一个段落标签</p>
    <!-- 单标签：只有一个标签，没有标签内容 -->
    <!-- 水平分割线hr -->
    <hr>   
    <img src="img/1.jpg" alt="图片加载失败会显示"> 
    <br>
    <img src="img/2.jpg" alt="图片加载失败会显示">

    <!-- 带有属性标签 -->
    <a href="http://www.baidu.com">百度</a>
    
    <!-- 标签可以嵌套 ,不可以交叉嵌套-->
    <DIV>
        <!-- 错误示例 -->
        <!-- <p>我说一个段落标签</div></p> -->
        <p>我说一个段落标签</p>
    </DIV>

    <!-- HTML不区分大小写，但是推荐大家使用小写 -->
    
</body>
</html>

1.1资源路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 资源路径分为绝对路径和相对路径 
        1.绝对路径是从根目录算起的路径叫绝对路径
        2.相对路径是当前目录算起的路径叫相对路径
        -->
    <!-- 相对路径的第一种写法 -->
    <img src="img/4.jpg" alt="">
    <!-- 相对路径的第二种写法 -->
    <img src="./img/4.jpg" alt="">
    <!-- 绝对路径的写法 -->
    <img src="D:\resource\前端\HTML5\img\3.png" alt="">

    <!-- 资源路径一般会使用相对路径，更加通用方便，绝对路径把工程拷贝给别人可能会出现资源找不到的问题 -->
</body>
</html>

1.2列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 列表标签可以分为有序列表标签和无序列表标签 -->

    <!-- 无序列表标签 -->
    <ul>
        <li>苹果</li>
        <li>鸭梨</li>
    </ul>

    <!-- 有序列表标签 -->
    <ol>
        <li>第一步</li>
        <li>第二步</li>
    </ol>
    <!-- 强调显示的顺序使用有序列表标签，不强调顺序使用无序列表标签 -->
</body>
</html>

列表标签

1.3表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- border-collapse: collapse 表示表格的边线进行合并 -->
    <table style="border: 1px solid black; border-collapse: collapse;">
        <tr>
            <th style="border: 1px solid black;">姓名</th>
            <th style="border: 1px solid black;">年龄</th>
        </tr>
        <tr>
            <td style="border: 1px solid black;">张三</td>
            <td style="border: 1px solid black;">22</td>
        </tr>
    </table>
</body>
</html>

表格标签

1.4表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 把数据提交给web服务器使用表单标签：<form> -->
    <form action="">
        <p>
            <!-- for 根据id名给指定id设置光标 -->
            <label for="name">用户名</label>
            <input type="text" name="" id="name">
        </p>
        <p>
            <label for="">密码</label>
            <input type="password" name="" id="">   
        </p>
        <p>
            <label for="">性别</label>
            <input type="radio">男
            <input type="radio">女
        </p>
        <p>
            <label for="">爱好</label>
            <input type="checkbox">学习
            <input type="checkbox">睡觉
            <input type="checkbox">打游戏
        </p>
        <p>
            <label for="">照片</label>
            <input type="file">
        </p>
        <p>
            <label for="">个人描述</label>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
        <p>
            <label for="">籍贯</label>
            <select name="" id="">
                <option value="">北京</option>
                <option value="">河北</option>
                <option value="">深圳</option>
                <option value="">湖北</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="按钮">
        </p>
        

    </form>
</body>
</html>

表单标签

1.5表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 把数据提交给web服务器使用表单标签：<form>                -->
    <!-- action 设置表单数据提交地址                             -->
    <!-- method 是表单提交方式，提交方式有GET和POST               -->
    <!-- name 表单元素的名称，用于作为提交表单数据时的参数名       -->
    <!-- value 表单元素的值，用于作为提交表单数据时参数名所对应的值-->
    <form action="https://www.baidu.com" method="GET">
        <p>
            <!-- for 根据id名给指定id设置光标 -->
            <label for="name">用户名</label>
            <input type="text" name="" id="name" name="username">
        </p>
        <p>
            <label for="">密码</label>
            <input type="password" name="password" id="">   
        </p>
        <p>
            <label for="">性别</label>
            <input type="radio" name="sex" value="0">男
            <input type="radio" name="sex" value="1">女
        </p>
        <p>
            <label for="">爱好</label>
            <input type="checkbox" name="love" value="学习">学习
            <input type="checkbox" name="love" value="睡觉">睡觉
            <input type="checkbox" name="love" value="打游戏">打游戏
        </p>
        <p>
            <label for="">照片</label>
            <input type="file" name="pic">
        </p>
        <p>
            <label for="">个人描述</label>
            <textarea name="desc" id="" cols="30" rows="10"></textarea>
        </p>
        <p>
            <label for="">籍贯</label>
            <select name="position" id="">
                <option value="1">北京</option>
                <option value="2">河北</option>
                <option value="3">深圳</option>
                <option value="4">湖北</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="按钮">
        </p>
        
        <!-- get和post方式提交表单数据都以http协议的方式提交数据给web服务器 -->
    </form>
</body>
</html>

GET请求会将内容放在路由里
在这里插入图片描述
请求头是GET
在这里插入图片描述
提交的内容
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <!-- 把数据提交给web服务器使用表单标签：<form>                -->
    <!-- action 设置表单数据提交地址                             -->
    <!-- method 是表单提交方式，提交方式有GET和POST               -->
    <!-- name 表单元素的名称，用于作为提交表单数据时的参数名       -->
    <!-- value 表单元素的值，用于作为提交表单数据时参数名所对应的值-->
    <form action="https://www.baidu.com" method="POST">
        <p>
            <!-- for 根据id名给指定id设置光标 -->
            <label for="name">用户名</label>
            <input type="text" name="" id="name" name="username">
        </p>
        <p>
            <label for="">密码</label>
            <input type="password" name="password" id="">   
        </p>
        <p>
            <label for="">性别</label>
            <input type="radio" name="sex" value="0">男
            <input type="radio" name="sex" value="1">女
        </p>
        <p>
            <label for="">爱好</label>
            <input type="checkbox" name="love" value="学习">学习
            <input type="checkbox" name="love" value="睡觉">睡觉
            <input type="checkbox" name="love" value="打游戏">打游戏
        </p>
        <p>
            <label for="">照片</label>
            <input type="file" name="pic">
        </p>
        <p>
            <label for="">个人描述</label>
            <textarea name="desc" id="" cols="30" rows="10"></textarea>
        </p>
        <p>
            <label for="">籍贯</label>
            <select name="position" id="">
                <option value="1">北京</option>
                <option value="2">河北</option>
                <option value="3">深圳</option>
                <option value="4">湖北</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="按钮">
        </p>
        
        <!-- get和post方式提交表单数据都以http协议的方式提交数据给web服务器 -->
    </form>
</body>
</html>

POST直接把内容放到请求头里
在这里插入图片描述

slience_me
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
notes:笔记-这是用于记录笔记的简单记事本
05-16
笔记笔记-这是用于做笔记的简单记事本。主要技术是JavaScript应用程序的可预测状态容器。 -该软件包提供Airbnb的.eslintrc作为可扩展的共享配置。 是一个很小的程序包，它使您可以更方便地处理不可变状态。 React...
HTML标签----图文详解
weixin_34380948的博客
10-01 1005
本文最初于2015-10-01发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。 以下是正文。 国庆节快乐，还在加班的童鞋，良辰必有重谢！ 本文主要内容 头标签 排版标签：&lt;p&gt;     &lt;div&gt;     &lt;span&gt;``&lt;br&gt;     &lt;hr&gt;     &lt;cent...
web学习记录
weixin_52083155的博客
07-22 123
web学习记录基本语言学习一、HTML 基本语言学习 一、HTML <!-- 声明为html5文档 --> <!DOCTYPE html> <html> <!-- 头部元素 --> <head> <!-- 对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码--> <meta charset="utf-8"> <!-- 文档的标题 --> <tit
Python-web开发学习笔记（1）--- HTML基础
尚拙的博客
05-06 1831
首先说明一点，HTML并不是正儿八经的编程语言，也可以说，它不在计算机编程语言的范畴里，它只是一些具有特定格式的符号标签，这些符号标签相互配合，如果一些文本、媒体等内容被这些符号标签以不同方式渲染后，就会产生不同的渲染效果，当然最重要最特殊的是，这些标签是能够被我们的浏览器识别的标签，这就是HTML标签。所以本质上讲，我们学HTML实质上是去记住它的常见的一些符号标签的写法以及用法，仅此而已。接下来我就介绍一个常见的HTML符号标签。
JavaSE学习笔记 2024-1-5 --WEB基础
最新发布
CHiN_951的博客
01-11 354
前端开发的三层
谷粒商城-个人笔记(基础篇一)
热门推荐
代码的知行者
09-26 4万+
前后分离开发，分为内网部署和外网部署，外网是面向公众访问的，部署前端项目，可以有手机APP，电脑网页；
learning-linux-mint:Linux Mint学习笔记
05-28
Linux Mint 学习笔记 内容介绍 Linux Mint是一份基于...这份Linux Mint学习笔记, 记录Linux Mint (Linux Mint 19 Cinnamon 版本) 的学习过程和日常使用. 访问方式 这是个人学习Linux Mint的笔记，请点击下面的链接
我的HTML+Css学习笔记
02-25
这是我作为一名前端开发初学者的一些学习笔记，以此记录并分享给和我一样有需要的萌新作为参考。
B站Mosh终极 HTML & CSS 课程汇总笔记
07-20
总共不到2w字，前面在讲一些基础的时候记录的文字较多，但是后面基本上都是敲代码了，所以，笔记就很少了，基本全是代码。 还有一点，就是我用的markdown记得笔记，所以图片都上传到了github上了（别问我为啥不用...
笔记本Web Clipper「Notebook Web Clipper」-crx插件
03-20
Notebook Web Clipper使用Web Clipper将内容从Web剪辑到笔记本。保存为便签卡的剪辑内容会立即在您的设备之间同步。请从Google PlayStore（https://play.google.com/store/apps/details?id=com.zoho.notebook）或...
Django入门+实战教程+个人笔记+实时更新+基础知识 -＞（个人学习记录笔记）
slience_me的博客
10-25 1505
python manage.py startapp stu 创建新应用 名称 &emsp; 制表符 python manage.py runserver 127.0.0.1:8000 启动服务器 2.登录，登录首页实现步骤 1.创建一个Djan项目 2.在终端中创建应用 python manage.py startapp 应用名 3.在项目包中的settings.py中添加应用 INSTALLED_APPS = [ 'django.contrib.admin', 'django
Python 基础知识 + 个人学习 + 实时更新 -＞（个人学习记录笔记）
slience_me的博客
12-14 767
1.输出函数 print() 1.1 输出数字 print(520) print(98.5) 1.2 输出字符串 print('helloworld') print("helloworld") 1.3 输出含有运算符的表达式 print(3+1) 1.4 将数据输出文件中 将数据输出文件中，注意 ！1.所指定的盘符的存在 2.使用file=fp # a+是以读写的方式打开文件， # 如果存在就在文件内容的后边继续追加，不存在就创建 fp = open('D:/test.txt', 'a+') prin
Java语言高级（第四部分）File类与IO流 -＞（个人学习记录笔记）
slience_me的博客
01-27 495
第七章 网络编程 1. 网络编程入门 1.1软件结构 C/S结构 ：全称为Client/Server结构，是指客户端和服务器结构。常见程序有ＱＱ、迅雷等软件。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PrTWUD0c-1611465109083)(img/1_cs.jpg)] B/S结构 ：全称为Browser/Server结构，是指浏览器和服务器结构。常见浏览器有谷歌、火狐等。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7D2T
Web基础 JavaScript基础简单内容 -＞（个人学习记录笔记）
slience_me的博客
12-30 427
JavaScript JavaScript的介绍
Web基础 CSS基础简单内容 -＞（个人学习记录笔记）
slience_me的博客
11-26 421
1.第一个网页 <!-- 文档声明 ： html5文档 --> <!DOCTYPE html> <!-- 当前网页的语言是英文，默认不指定是中文=> lang='zh'--> <!-- 一般不用指定成en语言--> <html lang="en"> <head> <!-- 指定网页的编码格式 --> <meta charset="UTF-8"> <!-- 在移动设备浏
Java语言高级（第三部分）异常多线程 -＞（个人学习记录笔记）
slience_me的博客
01-26 406
第五章 异常与多线程 1. 异常 1.1 异常概念 异常，就是不正常的意思。在生活中:医生说,你的身体某个部位有异常,该部位和正常相比有点不同,该部位的功能将受影响.在程序中的意思就是： 异常 ：指的是程序在执行过程中，出现的非正常的情况，最终会导致JVM的非正常停止。 在Java等面向对象的编程语言中，异常本身是一个类，产生异常就是创建异常对象并抛出了一个异常对象。Java处理异常的方式是中断处理。 异常指的并不是语法错误,语法错了,编译不通过,不会产生字节码文件,根本不能运行. 1.2 异常体系
Java基础学习 -＞（个人学习记录笔记）
slience_me的博客
01-09 346
1. 认识 HelloWorld javac 文件名.java 编译 java 文件名 运行 注释方法与C语言相同 // 第一行的第三个单词必须和所在的文件名称完全一样，大小写也要一样 //public class 后面代表定义一个类的名称，类是Java当中所有源代码的基本组织单位。 public class HelloWorld { // 第二行是万年不变的固定写法，代表main方法 // 这一行代表程序执行的起点 public static void main(String[] ar
Web基础 jquery基础简单内容 -＞（个人学习记录笔记）
slience_me的博客
01-01 342
jQuery 1. jQuery的用法 1.1 jQuery的引入 <script src="js/jquery-1.12.4.min.js"></script> 1.2 jQuery的入口函数 我们知道使用js获取标签元素，需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快。 入口函数示例代码: <script
javascript学习笔记--查看html元素和改变html的内容
06-01
好的，我可以为您解答关于 JavaScript 学习笔记方面的问题。针对您的问题，查看 HTML 元素和改变 HTML 内容是 JavaScript 中非常常见的操作之一，我们可以通过以下几种方式实现： 1. 通过 `document.getElementById...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

slience_me

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值