day06/23-12-18前端基础

TEST_Pony

已于 2023-12-19 14:02:03 修改

阅读量430

点赞数 13

文章标签： html5 功能测试

于 2023-12-19 09:00:00 首次发布

本文链接：https://blog.csdn.net/m0_58141927/article/details/135060905

版权

web前端三大核心技术

HTML：负责网页的架构

CSS：负责网页的格式、美化

JS：负责网页的行为

HTML标签

单标签<html>

双标签<b>内容</b>

标签属性

属性格式：属性名=“属性值”

HTML骨架标签

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>XXX</title>
</head>
<body>
	XXX
</body>
</html>

国际通用快捷键：

注释：ctrl+/

<style type="text/css">
    /* css注释 */
</style>

<script>
//js 注释 javascript
</script>

常用标签：

标题标签

<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
</body>

段落标签

<body>
    <p>第一个段落,p标签独占一行（换行）<p>
    <p>另外一个段落</p>
</body>

超链接标签

说明：超链接是通过<a>标签进行定义的
属性：
href：跳转地址（网页，本地文件）
target：指定窗口打开模式，值为_blank时，在新窗口打开

<body>
	<a href="https://www.baidu.com" target="_blank">百度</a>
</body>

图片标签

说明：HTML图片是通过<img>标签进行定义的
属性：
   src：图片路径
   title：光标悬停显示文字
   alt：图片未加载时显示文字
   width：图片宽度
   height：图片高度
测试点：图片必须有title属性（体验感好）

<body>
	<img src="logo.jpg" title="XX" alt="logo" width="104" height="142"/>
</body>

换行和空格

换行：<br/>
空格：&nbsp；
横线：<hr/>

布局标签

说明：页面布局使用，常用（div和span）
div：大盒子，独占一行
span：小盒子：一行放多个

<body>
	<!-- 大盒子-div -->
	<div>div1</div>
	<div>div2</div>
	<div>div3</div>
	<!-- 小盒子-span -->
	<div>
		价格<span>$199</span>
	</div>
</body>

列表标签

说明：列表标签常用li元素（分为有序和无序）
有序：ol>li
无序：ul>li

<body>
	<!-- 有序 -->
	<ol>
		<li>深圳</li>
		<li>广州</li>
	</ol>

	<!-- 无序 -->
	<ul>
		<li>测试</li>
		<li>开发</li>
	</ul>
</body>

表单标签

说明：页面提交输入信息需要使用表单标签<form>
form标签的作用：提交页面输入数据
属性：
   action：将数据提交到该页面
(action的参数)method：
       get：
           1、参数在url中显示
           2、速度相对于post快
           3、提交内容长度有限制
       post：
           1、参数不在url中显示
           2、速度相对于get慢
           3、提交内容长度无限制
       场景：
           1、get：查询使用
           2、post：提交数据使用（登录、注册）
input：type属性值不同
值： text：文本框
            password：密码框
            radio：单选
                相同一组才能单选，相同的name属性值为一组
            checkbox：多选框
            button：普通按钮

reset:重置按钮

<body>
	<form action="xx.html" method="post">
		用户名：
		<input type="text" name="username"/><br/>
		密码：
		<input type="password" name="password"/><br/>
		性别：
		<input type="radio" name="sex"/> 男
		<input type="radio" name="sex"/> 女<br/>
    <!--
    单选效果：
    1.相同一组的radio才能做单选
    2.设置相同（组名）name属性值
        -->
		您的爱好：
		<input type="checkbox"/>测试
		<input type="checkbox"/>吃饭
		<input type="checkbox"/>睡觉觉
		<input type="checkbox"/>打豆豆<br/>
		 <input type="submit" value="提交"/>
<!--统一使用value赋值，不同浏览器默认值不同
提示：普通按钮默认没有执行效果，需要配合JS实现-->
        <input type="reset"" />
		<input type="button" value="点我试试"/>
	</form>
</body>

TEST_Pony

关注

13
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
day06/23-12-18前端基础

target：指定窗口打开模式，值为_blank时，在新窗口打开。2、post：提交数据使用（登录、注册）说明：页面提交输入信息需要使用表单标签说明：HTML图片是通过标签进行定义的。1、参数不在url中显示。1、参数在url中显示。href：跳转地址（网页，本地文件）测试点：图片必须有title属性（体验感好）说明：页面布局使用，常用（div和span）说明：列表标签常用li元素（分为有序和无序）1、get：查询使用。说明：超链接是通过标签进行定义的。
复制链接

扫一扫