第一次网页培训前端笔记(HTML常用标签)

学习网址:【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili

一、安装编译器

HBuilder X

链接:HBuilderX-高效极客技巧 (dcloud.io)

二、基础操作

1.

 HTML 基础 | 菜鸟教程 (runoob.com)

2. 常用标签

标签描述
<!--...-->定义注释
<!DOCTYPE>定义文档类型
<a>

定义超文本链接

(target="blank"  在一个新的标签页打开)

<br>定义换行
<div>定义文档中的节
<font>定义文字的字体、尺寸和颜色
<h1>to<h6>定义标题
<hr>定义水平线
<img>定义图片
<ol>定义有序列表
<ul>定义无序列表
<b>定义文本粗体

 

列表:

        3. 有序列表:<ol><li></li></ol>

                        

        <ol type="A">
			<li>第一个</li>
			<li>第二个</li>
			<li>第三个</li>
		</ol>

        4. 无序列表:<ul><li></li></ul>

		<ul type="circle">
			<li>第一个</li>
			<li>第二个</li>
			<li>第三个</li>
		</ul>

5. form标签:

        表单标签,块级元素,会自动换行。将数据传输给服务器。

        常用属性:

                action  表单提交的地址URL

                id  唯一标识

                name  名称

                target  表单提交打开方式(当前窗口)

                method  提交方式

                                get请求(默认)

                                        参数会直接跟在url后面,用问号拼接。

                                        安全性差,传递的数据量小,效率高(是post的两倍),有缓存

                                post请求

                                        参数不会跟在url地址栏后面,会放在请求体中

                                        安全性高,传输数据量大,速度相对来说慢,无缓存。

表单元素需要设置name属性值,否则数据无法传递!!!

6. input元素

        type  表单元素的类型

                text  文本框

                password  密码框

                radio  单选框(需要设置一组相同的name属性值)

                checkbox  复选框(需要设置一组相同的name属性值)

                button  普通按钮

                hidden  隐藏域(用来存放需要传递给服务器,但不需要显示的数据)

                file  文件域(上传文件)

                date  日期框

                submit  提交按钮

                reset  重置按钮

                image  图片按钮(提交按钮)

        value  表单元素的值

        checked  是否选中(单选框/复选框)

        disabled  是否禁用

        maxlength  允许输入的最大字符

三、HTML基本框架

1. 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>这是一个HTML界面</title>
	</head>
	<body>
		<hr color="red" size="3" width="10%" align="left"/>
		<ul type="circle">
			<li>第一个</li>
			<li>第二个</li>
			<li>第三个</li>
		</ul>
		<ol type="A">
			<li>第一个</li>
			<li>第二个</li>
			<li>第三个</li>
		</ol>
		<a href="https://www.baidu.com">这是一个链接</a>
		
		<form action="#" method="get" id="myform" name="myform">
			
			First Name:<input type="text" value="12" name="userName" /><br />
			Last Name:<input type="text" name="userName" /><br />
			<input type="submit" value="提交" />
		</form>
		
	</body>
</html>

2.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>郑州轻工业大学官网</title>
	</head>
	<body>
		<p align="right">教工 学生 考生 校友 English</p>
		<img src="img/logo.png" /> <p></p>
		<p align="center">网站首页 学校概况 机构设置
		 师资队伍 人才培养 学术研究 招生与就业 交流合作
		</p>
		<img src="img/主页.jpg" />
		<p align="right">进入新闻网>></p>
	</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值