目录
一、HTML
(一)HTML介绍
Web前端三大核心技术
- HTML:负责网页的架构
- CSS:负责网页的格式、美化
- JS:负责网页的行为
HTML的定义:
HTML(超文本标记语言)是用来描述网页的一种语言,由一套标记标签组成。
HTML标签:
单标签 <标签名>
双标签 <标签名>内容</标签名>
标签属性:
属性格式:属性名 = "属性值"
eg:<a href="http://www.jd.com">京东</a>
(二)HTML骨架标签
html:根目录,所有的内容都应该放在html标签中
hand:头部标签
body:身体标签(代码编写区域)
(三)注释
-
作用:描述的内容不会被浏览器执行
-
说明:解析程序给程序员看
-
国际通用注释快捷键:Ctrl+/
-
测试点:前端页面发布上线之前,需要检查(描述不恰当的文字出现)所有注释或去除注释
(四)常用标签
标题标签
- 说明:HTML标题是通过
<h1>
~<h6>
等标签进行定义
<h1>
最大,<h6>
最小
<h1>一级标题</h1>
段落标签
- 说明:HTML段落是通过
标签进行定义的
<p>第一个段落</p>
- 特点:独占一块(换行作用),有语义含义——浏览器知道你是段落
超链接标签
- 说明:超链接是通过
<a>
标签进行定义的 - 作用:点击文本跳转到指定页面
- 属性:
- href:点击文本要跳转的地址(网址、本地文件)
- target:指定窗口打开模式
图片标签
-
说明:网页中插入图片就要使用图片标签,HTML图片是通过
<img>
标签进行定义的 -
属性:
- src:图片路径
- title:光标悬停显示文字
- alt:图片未加载时显示文字
- width:图片宽度
- height:图片高度
-
测试点:必须有title属性(悬停和未加载显示)
换行和空格
- 换行:
<br />
- 空格:
布局标签
- 说明:页面布局使用,常用
div
和span
div:大盒子 独占一行
span:小盒子 一行可以放多个
列表标签
- 说明:列表标签常用
li
元素(分为有序和无序)
<body> <!--1、有序列表--> <ol> <li>北京</li> <li>上海</li> </ol> <!--2、无序列表--> <ul> <li>测试</li> <li>开发</li> </ul> </body>
<body> <style> /*css标签*/ </style> <script> //js标签 </script> </body>
style:css标签
script:js标签
link:外部加载css标签
表单标签
- 说明:页面提交输入信息需要使用表单标签
<form>
- input标签
- 文本框:
<input type="text" />
- 密码框:
<input type="password" />
- 单选框:
<input type="radio" />
- 文本框:
<!--单选效果: 1、设置一组radio才能做单选; 2、设置相同(组名)name属性值为一组 --> 性别: <input type="radio" name="sex" />男 <input type="radio" name="sex" />女
-
- 复选框:
<input type="checkbox" />
- 复选框:
爱好: <input type="checkbox" />看书 <input type="checkbox" />看电影 <input type="checkbox" />打游戏
-
- 按钮:
-
-
- 提交按钮:
<input type="submit" />
- 提交按钮:
-
-
-
- 重置按钮:
<input type="reset" />
- 重置按钮:
-
-
-
- 普通按钮:
<input type="button" value="普通按钮" />
- 普通按钮:
-
- form
- 作用:将页面输入的数据提交到后台或指定页面
- 属性:
action:指定将数据提交到哪个页面
method:提交参数的方法(get、post)
get:查询使用
1、参数url明文显示
2、提交速度快
3、提交参数有长度限制
post:提交数据、登录、注册
1、参数url明文显示
2、提交速度快
3、提交参数有长度限制
按钮测试点:统一使用value进行赋值
标签:标签,Day04,HTML,提交,按钮,属性,页面 From: https://www.cnblogs.com/overlord-lxy/p/18182721普通按钮默认没有执行效果,需要配合js来实现