Web前端 html入门

最新推荐文章于 2021-10-08 17:07:13 发布
最新推荐文章于 2021-10-08 17:07:13 发布
阅读量290 收藏
点赞数
分类专栏： Web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/return_2/article/details/114163824
版权

这里写目录标题

html书写规范

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body bgcolor="red"> <!-- bgcolor是页面的背景颜色属性 -->
hello!这是我的第一个网页！
<hr/>
有一个按钮
<br/>
<button onclick="alert('你不要过来啊！')">按钮</button>
<!-- onclick表示点击事件，alert()是一个警告框函数，
     它可以接收任意参数，参数就是警告框内出现的信息 -->
</body>
</html>

html 代码注释：<!-- 代码注释 可以在页面右键查看源代码中看到 -->

html标签介绍

1. 标签的格式：
<标签名>封装的数据</标签名>
2. 标签拥有自己的属性
	基本属性 ： bgcolor="red"    可以修改简单的样式效果
	事件属性 ： onclick="alert('你不要过来啊')      可以直接设置事件响应后的代码
3.标签
	双标签： 
		开始标签 ：<body>
		结束标签 ： </body>
	单标签 ：
		自结束标签 ：<br/>

特殊字符

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
hello!这是我的第一个网页！
<hr/>
 我是&lt;br&gt;标签
<br/>
</body>
</html>

效果：
在这里插入图片描述

标题标签 – h1–>h6

标题标签是h1到 h6

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<h1 align="left">标题1</h1><!-- align是对齐属性-->
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>

效果：
在这里插入图片描述

超链接 – a

概念：在网页中点击之后所有会跳转的内容都是超链接
标签：
属性：target可以设置哪个目标跳转
_self 表示当前页面跳转
_blank 表示打开新网页跳转

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<a href="http://www.baidu.com" target="_self">百度</a><!--在原有网页上打开-->
<a href="http://www.baidu.com" target="_blank">百度</a><!--在新网页上打开-->
</body>
</html>

列表标签 – 无序ul / 有序ol

无序列表：<ul></ul>
有序列表：<ol></ol>

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
    <ul>    <!--ul type="" 可以修改列表项前面的符号-->
        <li>赵四</li>
        <li>刘能</li>
        <li>宋小宝</li>
        <li>渣渣辉</li>
    </ul>
    <ol>
        <li>赵四</li>
        <li>刘能</li>
        <li>宋小宝</li>
        <li>渣渣辉</li>
    </ol>
</body>
</html>

效果：
在这里插入图片描述

img标签：可以在html页面上显示图片

1.src属性可以设置图片的路径：
	1.1 相对路径：
	. 表示当前文件所在的目录
	.. 表示当前文件所在的上一级目录
	/ 表示进入目录或打开文件
	1.2 绝对路径：
http://ip:端口号/工程名/资源路径
2.width属性可以设置图片的宽度
3.height属性可以设置图片的高度
4.border属性可以设置图片边框大小
5.alt属性可以设置当指定路径找不到图片时，用来代替图片显示的文本内容

表格标签 – table

table标签是表格标签
(1) border属性设置表格最外层边框的大小，如果不设置或值为0则无表格外层边框，亦 无单元格边框，仅有数据，且按照表格方式排列
(2) width属性设置表格宽度
(3) height属性设置表格高度
(4) align属性设置表格相对于页面的对齐方式
(5) cellspacing属性设置单元格间距，设置为0单元格的边重叠，会加粗
(6) cellpadding属性设置单元格内容距离单元格边框的距离大小

tr标签是行标签，其中的内容都在一行
th标签是表头标签，其中的内容在单元格中(自动的加粗并居中)
td标签是单元格标签，其中的内容在单元格中，写几个td标签一行中就有几个单元格
align属性设置单元格文本对齐方式
b标签是加粗标签

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>图片显示</title>
</head>
<body>
    <table border="2" width="300" height="300">
        <tr>
            <td align="center"><b/>1.1</td>
            <th>1.2</th>
            <td>1.3</td>
        </tr>

        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>

        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </table>
</body>
</html>

效果：
在这里插入图片描述

跨行跨列表格

单元格中
colspan属性设置跨几列
rowspan属性设置跨几行

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>图片显示</title>
</head>
<body>
    <table border="2" width="500" height="500" align="center">
        <tr>
            <td colspan="2">1,1</td>
            <td>1,3</td>
            <td>1,4</td>
            <td>1,5</td>
        </tr>
        <tr>
            <td rowspan="2">2,1</td>
            <td>2,2</td>
            <td>2,3</td>
            <td>2,4</td>
            <td>2,5</td>
        </tr>
        <tr>
            <td>3,2</td>
            <td>3,3</td>
            <td>3,4</td>
            <td>3,5</td>
        </tr>
        <tr>
            <td>4,1</td>
            <td>4,2</td>
            <td>4,3</td>
            <td colspan="2" rowspan="2">4,4</td>
        </tr>
        <tr>
            <td>5,1</td>
            <td>5,2</td>
            <td>5,3</td>
        </tr>
    </table>
</body>
</html>

效果：
在这里插入图片描述

iframe框架标签(内嵌窗口)

iframe标签可以在页面上开辟一个区域显示一个单独的页面
iframe和a标签组合使用的步骤：
在iframe标签中使用name属性自定义一个名称(内嵌窗口的名称)
将a标签中的target属性值设置为你想要显示的那个内嵌窗口的名字

<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>图片显示</title>
</head>
<body>
    <br>
    原本的网页外围！
    <br/>
    <iframe src="./rehello.html" width="300" height="300" name="abc"></iframe>
    <br/>
    <br/>
    <ul>
        <li><a href="./rerehello.html" target="abc">rehello.html</a> </li>
    </ul>
</body>
</html>

效果：
之前：
在这里插入图片描述
之后：
在这里插入图片描述

表单标签 – form

form标签：在html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。

	input标签：用户输入标签
		属性：
			type：text -- 输入文本  vakue -- 默认值
				      password -- 密码  value -- 默认值
				      radio -- 单选框 name -- 设置名字用来识别那些是同一组   checked="checked" -- 在组内默认选中
				      checkbox -- 多选框
				      reset -- 重置按钮  value -- 修改按钮上的文本
				      submit -- 提交按钮 value -- 修改按钮上的文本
				      button -- 按钮 value -- 修改按钮上的文字
				      file -- 文件上传域
				      hidden -- 隐藏域   放我们发送某些信息不用用户看到可以用隐藏域

在这里插入图片描述

	select标签：下拉选项
	option标签：下拉列表
		属性：
			selected=‘selected’ -- 设置默认选项

在这里插入图片描述

	textarea标签：多行文本输入框
		属性：
			rows -- 可以显示几行的高度
			cols -- 每行可以显示字符的宽度
			默认值就是标签中的文本

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <form>
        用户名称：<input type="text" value="默认值"><br/>
        密码：<input type="password" value="默认值"><br/>
        <!--type="radio"是单选框 type="checkbox"是复选框-->
        <!--通过name属性来辨别分组 checked属性来设置默认选项-->
        性别：<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女
        兴趣爱好：<input type="checkbox"/>python <input type="checkbox"/>java
        国籍：<select>
        <option>---请选择国籍---</option>
        <option selected="selected">中国</option>
        <option>美国</option>
        <option>日本</option>
        <option>新加坡</option>
        </select>
        自我评价：<textarea rows="10" cols="20">我就是默认值</textarea>
        <input type="reset" value="重置按钮">
        <input type="submit" value="'提交按钮">
        <input type="button" value="就是一个按钮">
        <input type="file">
        <input type="hidden">
    </form>
</body>
</html>

表单格式化

把表单嵌入表格内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的测试</title>
</head>
<body>
<form action="http://locolhost:3306" method="get">
    <input type="hidden" name="action" value="login"/>
    <h1 align="center">用户注册</h1>
    <table align="center" border="1">
        <!--之后单元格的内容都要放在td中，否则内容就不在表格中了-->
        <tr>
            <td>用户名称:</td>
            <td>
                <input type="text" name="username" value="默认值"/>
            </td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td>
                <input type="password" name="password" value="***"/>
            </td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" value="boy"/>男
                <input type="radio" name="sex" checked="checked" value="girl"/>女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input name="hobby" type="checkbox" checked="checked" value="Java"/>Java
                <input name="hobby" type="checkbox" value="JavaScript"/>JavaScript
                <input name="hobby" type="checkbox" value="C++"/>C++
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select>
                    <option value="none">--默认值是第一个option的内容--</option>
                    <option value="China">中国</option>
                    <option value="Japan">中华</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td>
                <textarea rows="10" cols="20" name="Describe">默认值为空</textarea>
            </td>
        </tr>
        <tr>
            <td><input type="reset"/></td>
            <td>
                <input type="submit"/>
                <input type="file">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

在这里插入图片描述

表单提交信息给服务器

form标签：表单标签
	属性：
		action -- 设置提交的服务器地址
		method -- 设置提交的方式 get 或 post

注意：
A. 表单提交时数据没有发给服务器的三种情况：
1.表单项没有name属性值
2.单选、复选、下拉列表中的option标签 没有添加value属性
3.表单项不在提交的form标签中

B. get请求的特点：
1 浏览器地址栏中的地址是action的属性值[?请求参数(表单中的数据)]
2 请求参数的格式是：name=value&name=value，不同数据使用&连接
3 不安全，提交密码会出现在浏览器地址栏中
4.有数据长度的限制：表单值包含非ASCII字符或者超过100个字符，get方式 不可再用，必须使用method=“post”

C. post请求的特点：
1.浏览器地址栏中只有action的属性值
2. 相对于get请求更安全
3. 理论上没有数据长度的限制

在这里插入图片描述
type=‘checkbox’ ‘radio’ ‘option ’在提交服务器时，提交的为其标签的value值
提交模式为：name属性的值 = value属性的值

<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <form action="http://www.baidu.com" method="get">
        <h1 align="center">用户注册</h1>
        <table align="center">
            <tr>
                <td>用户名称：</td>
                <td><input type="text" value="默认值" name="a"></td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td><input type="password" value="默认值" name="b"></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="radio" name="sex" checked="checked" value="nan">男
                    <input type="radio" name="sex" value="nv">女
                </td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td><input type="checkbox" value="py" name="c"/>python
                    <input type="checkbox" value="ja" name="dc"/>java
                    <input type="checkbox" value="c" name="e/>C++
                </td>
            </tr>
            <tr>
                <td>国籍：</td>
                <td>
                    <select>
                        <option>---请选择国籍---</option>
                        <option selected="selected" value="cn">中国</option>
                        <option value="usa" name="abc">美国</option>
                        <option value="jp">日本</option>
                        <option value="sj">新加坡</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>自我评价：</td>
                <td><textarea rows="10" cols="20" name="abc">我就是默认值</textarea></td>
            </tr>
            <tr>
                <td><input type="reset" value="重置按钮"></td>
                <td><input type="submit" value="提交按钮"></td>
            </tr>
        </table>
    </form>
</body>
</html>

此表单点击提交之后浏览器地址栏的内容是：
https://www.baidu.com/?a=%E9%BB%98%E8%AE%A4%E5%80%BC&b=%E9%BB%98%E8%AE%A4%E5%80%BC&sex=nan&abc=%E6%88%91%E5%B0%B1%E6%98%AF%E9%BB%98%E8%AE%A4%E5%80%BC

其他标签

1.div标签：字符无论多少独占一行
2.span标签：其长度是封装数据的长度，即字符有多长标签就有多长
3.p标签：段落标签，默认会在字符的上下行各空出一行(如果有空行就不再多留空行)

<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span><!--有一个空格的原因：与下一段字符有大量空白-->
<span>span标签2</span>				
<p>p标签1</p>
<p>p标签2</p>

在这里插入图片描述

内蒙金刚狼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3的使用及基本注意说明相关笔记（四）
jwlLWJ_2018的博客
07-02 15万+
1.使用CSS3来DIY图片i无缝轮播效果：图片大小：126*86&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;使用css3动画制作自动无缝轮播图&lt;/title&gt; &lt;sty
web前端html入门
Yiwanyou的博客
05-01 268
前言 网页： 链接、图片、文字、声音、视频等元素组成，称为html文件 html： 超文本标记语言，描述网页，一套标记标签，不是编程语言 浏览器内核： 负责读取网页内容，整理 结构html+表现css+行为javascript 一、html文件基本结构： <html> <head>...</head> <body>...</body> </html> html的基本结构可使用“！”加Tab键，自动填充 <!DOCTYPE h
requests实战之网页采集器
热门推荐
m0_43425029的博客
02-12 6万+
import requests if __name__ == "__main__": headers = { 'user-agent': 'Mozilla / 5.0(Windows NT 10.0;Win64;x64) AppleWebKit / 537.36(KHTML, likeGecko) Chrome / 88.0.4324.150Safari / 537.36' } url = "https://cn.bing.com/search" #处理url
HTML
studyfoup的博客
03-25 127
HTML内联元素
html()函数用法
weixin_42051538的博客
12-27 1563
近日，在写一个订餐系统时，在如何动态获取表格中文本信息时出现问题，最后通过html()函数解决，废话不多说，直接上代码。 function appendDataToTable(data) {//将数据库中数据放入表中 var txtName = data.Name; var txtAmount = data.Amount; var txtWords = data....
Web前端----HTML入门
xxyneymar的博客
10-08 449
1.简介 1.1 系统架构 ①B/S架构：Browser / Server。浏览器/服务器的交互形式。 优点：升级方便，只升级服务器端代码即可，维护成本比较低。 缺点：速度慢(因为很多数据都需要从服务器端下载过来)、体验不好、界面不炫酷。 ②C/S架构：Client / Server。客户端/服务器端的交互形式。 优点：速度快，体验好，界面炫酷。 缺点：升级麻烦，维护成本较高。 1.2 HTML概述 HTML...
web前端基础入门知识
10-13
【Web前端基础入门知识】 Web前端开发是构建互联网应用程序的重要组成部分，主要负责用户与网站交互的界面设计和实现。本文将介绍三个核心的前端技术：HTML（超文本标记语言）、CSS（层叠样式表）以及它们的基础...
web前端系列 html5入门到精通 视频教程
03-01
web前端系列 html5入门到精通 视频教程，百度云链接 ，永久有效！
资料-Web前端入门教程资料下载地址.txt
03-30
|- web前端培训班_web前端开发优质教程_前端工程师培训-黑马程序员.png |- HTML入门及基础02资料.zip |- HTML5入门及基础01资料.zip |- CSS3入门及提高 08资料.zip |- CSS3入门及提高 07资料.zip |- CSS3入门及提高 ...
web前端之HTML语言简易入门教程.pdf
06-20
Html是英文 HyperText Markup Language 的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPage Editor 等...
web前端入门代码.zip
12-04
这个压缩包“web前端入门代码”很可能是包含HTML文件、CSS文件和可能的JavaScript文件的项目结构，展示了如何将这三个核心技术结合起来创建一个完整的Web应用。对于初学者来说，这是一个很好的实践机会，可以学习...
OGSM绩效管理培训材料双份资料.pptx
07-12
OGSM绩效管理培训材料双份资料.pptx
CAD机械设计赛项单选题样题.docx
07-12
CAD机械设计赛项单选题样题
100款古风PPT (79).pptx
最新发布
07-12
【ppt素材】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
搭建zookeeper
07-12
搭建zookeeper
2024年欧洲快速断开配件市场主要企业市场占有率及排名.docx
07-12
2024年欧洲快速断开配件市场主要企业市场占有率及排名.docx
springcloud-基于Spring Boot的微服务开发框架
07-12
Spring Cloud是一套基于Spring Boot的微服务开发框架，它提供了一种构建分布式系统和服务网格的完整解决方案。Spring Cloud的核心目标是利用Spring Boot的自动化配置特性，使开发者能够快速搭建出分布式系统中的各个组件，如服务发现、配置中心、熔断器、智能路由、消息总线、负载均衡、断路器、数据监控等。 Spring Cloud生态系统庞大且功能丰富，其中包含了多个子项目，比如Spring Cloud Netflix（Eureka、Hystrix、Ribbon、Feign等），用于服务发现、断路器、负载均衡和REST客户端；Spring Cloud Config用于集中化配置管理，确保在不同环境下的配置一致性；Spring Cloud Gateway作为API网关，负责路由、过滤和安全控制；Spring Cloud Stream用于构建消息驱动的微服务应用，支持与外部消息中间件的集成；Spring Cloud Sleuth和Zipkin则提供了分布式追踪能力，便于在复杂的服务调用链中定位问题。 Spring Cloud的强大之处在于它将复杂的分布式系统抽
Web开发领域-Node.js技术-HTTP服务器搭建与操作-实验教程及心得
07-12
内容概要： 本实验报告详细记录了一次基于Node.js的Web服务器搭建实验过程，旨在帮助学生掌握Node.js的基本操作和理解HTTP协议的工作原理。实验中，学生通过引入Node.js的内置http模块创建了一个简单的HTTP服务器，设置回调函数处理请求与响应，并学习了如何通过改变Content-Type头来影响页面渲染方式。此外，实验还涉及了如何针对不同URL路径返回特定内容，以及如何使用命令行工具启动和管理服务器。 适用人群： 本资源适合正在学习Web开发基础，特别是Node.js初学者的学生或开发者。对于希望深入了解服务器端编程、HTTP协议及响应类型的人来说尤为有用。 使用场景及目标： 教学场景：作为大学课程《Web平台B》的实验教材，帮助学生实践Node.js编程和Web服务器搭建技能。 自我学习：供个人或小组在课余时间进行自主学习，通过动手实践加深对Node.js和HTTP的理解。 项目准备：为即将开始的Web项目提供基础知识和技能储备，尤其是在使用Node.js构建后端服务时。
个人转正述职报告PPT模板
07-12
【作品名称】：个人转正述职报告PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
PHP、web前端开发-PHP的基础语法.pptx
12-16
"PHP、web前端开发-PHP的基础语法.pptx" PHP是一种广泛使用的服务器端脚本语言，尤其适用于Web开发。在这个文档中，我们主要关注PHP的基础语法，这对于理解和开始PHP编程至关重要。 首先，PHP的注释有两种形式。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值