使用Hbuilder，html标签

米斯木

已于 2023-10-07 16:07:26 修改

阅读量655

点赞数 1

分类专栏：前端文章标签： html

于 2023-03-20 20:48:16 首次发布

本文链接：https://blog.csdn.net/missmoonlight/article/details/129675820

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

编写第一个网页代码

步骤:
	1,创建一个文本文档
	2,修改名称为hello_world,名称不建议使用中文,数字开头,不要使用特殊符号,_与$除外.建议英文小写
	3,在该文档中编写以下内容
		<html>
			<head></head>
			<body>
				你好世界,Hello World
			</body>
		</html>
	4,保存
	5,将文档的后缀名修改为html或htm
	6,使用浏览器打开,观察结果
注意:
	编写代码时要注意缩进,会影响代码的阅读性
	所有的标点符号都要在英文状态下输入
	html网页的根标签,包含整个网页的所有内容
	head网页的头标签,其中的内容是给浏览器看的
	body网页的体标签,其中的内容主要是给用户看的
	网页的基本结构:
		<html>
			<head></head>
			<body></body>
		</html>

开发工具

作用:提高代码开发效率,降低程序员记忆负担
前端开发工具:
	VSCode(主流)
	HBuilder(新手使用)

HBuilder的使用

安装:
	发送的是免安装版
		1,解压
		2,在解压的文件中寻找hbuilder.exe
		3,双击hbuilder.exe
		4,点击暂不登录
创建项目:
	方式1:文件--新建--web项目 -- 填写项目名称,选择项目存储地址,点击完成
	方式2:在项目管理器点击鼠标右键 -- 新建 -- web项目 -- 填写项目名称,选择项目存储地址,点击完成
	注意:
		一个项目就是一个文件夹
		一个前端项目有多个网页文件(html文件)
项目结构:
	项目名称(文件夹)
		css(文件夹)
		img(文件夹)
		js(文件夹)
		index.html(项目自带的网页文件)

文本标签

普通文本：font,span
段落：p
标题：h1~h6
加粗：b
加大：big
变小：small
斜体：i
上标：sup
下标：sub
删除线：del

<html>
    <head></head>
    <body>
        <font>文本标签</font>
        <span>文本标签</span>
        <h1>一级标题</h1>
        <b>加粗</b>
        <big>加大</big>
        <small>变小</small>
        <i>斜体</i>
        <sub>上标</sub>
        <sup>下标</sup>
        <del>删除线</del>
    </body>
</html>

图片标签

作用：展示文本
img
	src图片地址
	alt提示字，在图片未显示时用文本提示

<img src="地址" alt="未显示时加以文本提示" />

表单标签

作用：提交或输入
input:输入
	type:输入类型，值由系统提供，不能自定义，可用系统类型如下
		text:给你显示一个输入文本的框
		password:同上，输入密码的
		button:按钮
		radio:单选按钮
			注意：name值相同的为同一组
		checkbox:多选按钮
			通上
		file:文件上传
		submit:提交，在form中使用
		reset:重置，在form中使用
	name:名称
	value：值
		当type类型为text或password时，在框内显示“”中的
		为button时，表示按钮上的字
		为radio或checkbox，表示选项的值，但不显示
	placeholder：提示字，是虚的
		一般在type类型为text或password中用

		<input type="text"  placeholder="账号"/>
		<input type="password" placeholder="密码" />
		<input type="button" value="按钮" />
		
form：表单
	action：提交的地址
	method：提交的方式
		get：会将上传的数据显示在网址尾部，只能上传少量数据
		post：不会将上传的数据显示在网址尾部，可上传大量的数据
	enctype：上传的数据类型
		multipart/form-data:有文件上传
    	application/x-www-form-urlencoded:默认的类型,不能上传文件
form基本上淘汰了

媒体标签

audio:音频
	src：播放音频的地址
	controls：控制器，就是可以点的开关
	autoplay：自动播放
	loop：循环播放

video：视频播放
	同上

注意兼容问题

排版标签

br:换行
hr：水平分割线

容器标签

div:块标签

表格标签

table：表格
	border：table边的宽度
	width：宽
	cellspacing：单元格间距
tr:行
td:单元格
	rowspan:合并行
	colspan:合并列
th:单元格

其他

超链接：a
	1.跳转的其他网站
		<a href="https://www.baidu.com">to 百度</a>
	2.跳转到当前项目的其他页面
		<a href="demo15.html">to 15</a>
		<a href="#">未知</a>需要调整的网页没做好时，可用此表达
	3.调整到当前页面的其他位置
		<a href="#top">
			<img src="img/up.jpg" width="40px" />
		</a>
		跳转到id为top的标签位置

列表标签
	有序：ol
		子项：li
	无序：ul
		子项：li

选择器：select
		<select>
			<option>中国</option>
			<option>美国</option>
			<option>英国</option>
			<option>法国</option>
			<option>韩国</option>
		</select>
		
框架标签：
	frameset
		frame
		frameset（可自我嵌套）
		不能放到body中
	iframe

Hbuilder免安装版
链接：https://pan.baidu.com/s/1Ffkq4Hd-qzUu5hlIek-rQw
提取码：csdn