前端-Html

最新推荐文章于 2024-06-06 17:07:53 发布
最新推荐文章于 2024-06-06 17:07:53 发布
阅读量623 收藏
点赞数
分类专栏： 笔记 java家族最菜小白菜本菜 前端 文章标签： 前端 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60021049/article/details/121306694
版权

文章目录

HBuilderX

介绍

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby，本身主体是由Java编写。

安装网站

官网：https://www.dcloud.io/hbuilderx.html

ps：HBuilderX只是前端编写工具

HTML

介绍
HTML超文本标记语言实现页面展现，形成静态网页

静态页面HTML

介绍

超文本标记语言，是做网站页面的最基础的开发语言

结构

文档声明，用来声明HTML文档所遵循的HTML规范。
头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。
体部分，用来存放网页要显示的数据。
声明网页标题
用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。

语法

  1. HTML标签
    HTML是一门标记语言，标签分为开始标签和结束标签。
    如果开始和结束中间没有内容，可以合并成一个自闭标签

  2. HTML属性
    HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引开。
    如：

  3. HTML注释
    格式：
    注意：不能交叉嵌套

  4. 如何在网页中做空格和换行
    换行:

    空格:在HTML中多个空格会被当做一个空格来显示

常用标签

标题标签

标签使用: <h1></h1> ~ <h6></h6>

<!doctype html>
<html>
	<head>
		<title>01</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<!-- 
		标题标签:
		包括:h1~h6 
		-->
		<h1 align=”center”>我是1号标题</h1>
		<h2>我是2号标题</h2>
		<h3>我是3号标题</h3>
		<h4>我是4号标题</h4>
		<h5>我是5号标题</h5>
		<h6>我是6号标题</h6>
	</body>
</html>

展示如图：
在这里插入图片描述

列表标签：

常用标签:<ul> <li></li> </ul>
常用字段:circle、square、disc

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		<!-- 列表标签:
			ol + li 有序
			ul + li 无序
			type 定义列表符号,默认是 disc 小圆点
		 -->
		<ul type="circle">
			<li>中国</li>
			<li>美国</li>
			<li>小日本</li>
		</ul>
		<ul type="square">
			<li>中国</li>
			<li>美国</li>
			<li>小日本</li>
		</ul>
		<ul type="disc">
			<li>中国</li>
			<li>美国</li>
			<li>小日本</li>
		</ul>
	</body>
</html>

展示如图:
在这里插入图片描述

图片标签：

标签使用：<img src="图片名" border="展示多少px" width="展示多少宽%" height="展示多少高%">

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		
		<!--	图片标签:
			img向网页中引入图片 (相对路径/绝对路径)
			border:边框
			width:宽度
			height:高度
		 -->
		<img src="1.jpg" border="10px" width="50%" height="30%">
	</body>
</html>

展示如图:

在这里插入图片描述

超链接标题

标题使用:<a></a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		
		<!-- 超链接标签 
			href 指定要跳转的位置
			target 指定要打开的方式
		-->
		<a href="http://www.baidu.com" target="_blank">点我</a>
		<a name="_top">java从入门到精通</a>
			<h6>你好java</h6>
			<h6>你好java</h6>
		<a href="#_top">回到顶部</a><!-- 获取_top的位置,像书签 -->
			
		<br><br><br><br>
	</body>
</html>

展示如下：
在这里插入图片描述

Input标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		
		<input type="text" />      普通文本框
		<input type="password" /> 密码
		<input type="radio"/>男   单选框
		<input type="number" />   数字值
		<input type="week" />	日历
		<input type="checkbox" />杨幂  复选框
		<input type="button"  value="点我一下"/>
		<input type="submit"  value="提交数据"/>
					
	</body>
</html>

展示如下：
在这里插入图片描述

表格标签

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>各种标签</title>
	</head>
	<body>
		<!--table表格标签 
			tr 表格里的行
			td 表格里的列
			border:表格的边框
			cellspacing:单元格的间距
			bgcolor:背景颜色
			width:宽度
			align:位置
		 -->
		<table border="1px" cellspacing="0" bgcolor="antiquewhite" width="30%" align="center">
			<tr>
				<td colspan="2">11</td> <!-- colspan是列合并,合并2列-->
				<!-- <td>12</td> -->
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td rowspan="2">23</td> <!-- rowspan是行合并,合并2行 -->
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
				<!-- <td>33</td> -->
			</tr>
		</table>
	</body>
</html>

展示如下
在这里插入图片描述

表单标签

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>form表单</title>
	</head>
	<body>
<!-- get方式提交的数据都在地址栏里 http://127.0.0.1:8848/cgbtest/3.html?user=&pwd= -->
		<!-- <form method="get"> -->
		<!-- post提交安全不显示数据 -->
		<form method="post">
			<table border="1px" bgcolor="bisque" cellspacing="0" width="35%" cellpadding="3">
				<th colspan="2">注册表单</th>
				<tr>
					<td>用户名:</td>
					<td><input type="text" name="user"/></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="pwd"/></td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td><input type="password" name="repwd"/></td>
				</tr>
				<tr>
					<td>昵称:</td>
					<td><input type="text" name="nick"/></td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td><input type="text" name="mail"/></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
				<!-- 不配name属性,性别是多选!!  sex属性的值按照1 2 提交-->
<!-- input中,type如果是radio或者checkbox的话,不配置value属性的话,默认提交on -->
						<input type="radio" name="sex" value="1"/>男
						<input type="radio" name="sex" value="2"/>女
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
					<!-- name必须配,多选 ,提交的值就是1 2 3 -->
					<input type="checkbox" name="like" value="1"/>篮球
					<input type="checkbox" name="like" value="2"/>足球
					<input type="checkbox" name="like" value="3"/>排球
					</td>
				</tr>
				<tr>
					<td>城市:</td>
					<td>
				<select name="city"> <!-- 实现多选,按name提交数据 1 2-->
							<option value="1">北京</option> 
							<option value="2">上海</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像:</td>
					<td>
						<input type="file" name="path"/>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button type="submit">提交</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

展示如下
在这里插入图片描述

其他标签

<!-- 其他标签 div  p  span -->
<div>大家好</div>
<div>大家好</div>
<div>大家好</div>

<p> Nice</p>
<p> Nice</p>
<p> Nice</p>

<span> hello</span>
<span> hello</span>
<span> hello</span>

展示如下
在这里插入图片描述

冬乏
关注
专栏目录
安卓学习之登录时如何将密码转换成点点点
weixin_44783823的博客
04-07 1253
今天get到一个新技能，就是在搞登录时，如何将边输入的密码边转换成**···** 只要在输入密码编辑框EditText布局上面加入 android:inputType="textWebPassword" 这一行代码就可以搞定啦： 运行效果为： ...
input type="number" 输入框显示圆点
xiejunna的博客
01-26 7352
为了实现密码输入框，输入数字时也显示圆点，可以用-webkit-text-security:disc;text-security:disc;属性。 语法： text-security: circle | disc | none | square; -webkit-text-security: circle | disc | none | square; //当type="password"
JavaScript js 仿password功能
weixin_30294021的博客
07-26 162
javascript仿password功能，将用户输入的信息替换成圆点。然后得到用户输入的字符串；当然还有其他的操作需要处理，这里就不一一处理；这里是大致实现的思路和方法。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> &lt...
前端-HTML-基础入门
最新发布
08-19
前端-HTML-基础入门
学习前端-HTML-day01
08-17
学习前端-HTML-day01
练习前端-HTML标签进阶篇-day02-03
08-19
练习前端-HTML标签进阶篇-day02-03
前端-web前端-模板-各行各业二十个模板7.13.2
07-13
前端-web前端-模板-各行各业二十个模板7.13.2 前端-web前端-模板-各行各业二十个模板7.13.2 前端-web前端-模板-各行各业二十个模板7.13.2 前端-web前端-模板-各行各业二十个模板7.13.2 前端-web前端-模板-各行各业二...
前端-web前端-模板-各行各业二十个模板7.10.3
07-10
前端-web前端-模板-各行各业二十个模板7.10.3 前端-web前端-模板-各行各业二十个模板7.10.3 前端-web前端-模板-各行各业二十个模板7.10.3 前端-web前端-模板-各行各业二十个模板7.10.3 前端-web前端-模板-各行各业二...
Html —— 密码输入框输入后显示为点
看了就会暴富的博客！
10-21 5594
问题 在输入密码时，为了防止被其他人看到，要将其显示成“.”，如何实现？ 解决 将input的类型设置为password即可。 <div class="a-b"><input class="a-b-c" type="password" placeholder="请输入密码"></div> 效果 ...
怎么解决Hbuilderx的侧边栏不显示文件目录问题
2302_79245293的博客
06-06 892
第二步：再视图中找到(显示项目管理器等左边视图)点击就可以了！
v-model --双向数据绑定
qq_45802159的博客
01-03 3298
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
html语言怎样设置密码类型,html – 在使用contenteditable div时模仿密码类型输入
weixin_39907850的博客
06-03 179
你必须找到mozilla和co的浏览器特定的CSS设置..但在webkit中它看起来像这样.你还需要通过javascript添加keypress处理程序.#password {-webkit-text-security: disc;height:20px; width:100px;-webkit-appearance: textfield;padding: 1px;background-color...
html input密码显示为“*”
happy59的专栏
08-12 1万+
*{margin:0;padding:0} input{font:14px Monospace;height:20px;width:160px;} label{display:inline-block;width:100px;height:20px;} #pass{position:absolute;left:100px;top:0;opacity:0;filter:alpha(opacit
input密码框圆点和提示字样式设置
热门推荐
webdongchao的博客
08-04 1万+
修改密码框内容样式 css input[type="password"] { letter-spacing: 5px; font-size: 20px; } input[type="password"]::-webkit-input-placeholder { letter-spacing: 0; font-size: 14px; } input[type="passw...
小白必看！前端密码表单输入内容变星号这样做！！！！我引入了 jquery
weixin_43099985的博客
09-07 1万+
在前端项目中经常有这样的需求！就是把密码输入表单内容变为星号！ 有的同学会说简单！type=’password’ 不就得啦！ 但是！当今浏览器解析时大多会把输入的内容变为“·”点，而不是星号！ 这本来无伤大雅！但有的产品经理态度强硬！说“我就要星号！* 行！你说的算 写js呗！我引入了JQ 写起来也很简单！ &amp;lt;input id=&quot;a&quot; type=&quot;text&quot;/&amp;gt; ...
密码加密圆点PHP,PHP 用户密码加密函数password_hash
weixin_33479446的博客
03-11 239
传统的用户名和密码都采用加盐的方式存储加密信息，盐值也需要存储。自PHP5.5.0之后，新增加了密码散列算法函数(password_hash)，password_hash() 使用足够强度的单向散列算法创建密码的散列(hash)。 password_hash() 兼容 crypt()。 所以， crypt() 创建的密码散列也可用于 password_hash()。password_hash不需要...
Python前端库ralbot-html 1.3.0版发布
资源摘要信息: "Python库 | ralbot-html-1.3.0.tar.gz" 知识点: 1. Python库概述: Python库是用Python编写的一组模块，包含了预定义的函数和类，可以被导入到其他的Python程序中，以实现特定的功能。库可以是内置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值