HTML CSS JS

最新推荐文章于 2024-05-22 00:30:00 发布

Zoya_R

最新推荐文章于 2024-05-22 00:30:00 发布

阅读量162

点赞数

分类专栏：笔记前端

本文链接：https://blog.csdn.net/Zoya_R/article/details/103005287

版权

笔记同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

HTML/CSS/JS

一、HTML
二、CSS

一、HTML

1.1 特点

① 不存在编译语法格式问题，是由浏览器解释运行的，是弱语言（不区分大小写）
② 由标签组成（单标签/双标签）（属性只写在开始标签）
③ 后缀是HTML

1.2 组成

head：头部

页面作者、资源引入、敏感词过滤、自动刷新频率、编码格式等页面基本配置

body：主体

承载各种标签

图片 img标签

– 是个单标签
– height和width属性不常用，通常会在css中设置；2个属性若只设置一个，另一个自动等比缩放

<img src="图片资源地址" title="图片名称，鼠标悬浮时或图片无法加载时提示"  alt="图片无法加载时优先提示的文字"  height="100px" width="200px">

超链接 a标签

– 链接至外部资源：目标位置=HTTP开头的域名地址
– 链接至当前项目内部资源：目标位置=#id（给目标位置的起始标签中写id属性并赋值）
– 直接#代表顶部

<a href= "目标位置">跳转到目标位置</a>
//图片超链接，嵌套：将图片放到超链接标签中文本的位置即可
<a href= "目标位置"><img src="图片资源位置" height="100px"></a>

列表 ol-li ul-li标签

– ol:ordered list
– ul:unordered list
–一定要与list标签配合使用

//ol  或 ul标签仅用于表示列表类型；Li标签包裹列表内容
//type表示列表符号的类型，start列表符号起始值
//ol有序列表
		<ol type="I" start="1">
			<li>asas</li>
			<li>bsbs</li>
			<li>cscs</li>
		</ol>
//ul无序列表
		<ul type="circle">
	//asas下有一个嵌套无序列表
			<li>asas</li>
			<ul>
				<li>aaa</li>
				<li>sss</li>
			</ul>
	//bsbs下有一个嵌套有序列表
			<li>bsbs</li>
			<ol type="A" start="2">
				<li>bb</li>
				<li>ss</li>
			</ol>
			<li>cscs</li>
		</ul>

form 表单标签

作用：获取用户数据并提交到服务器
action 属性数据提交的路径

method 属性数据提交方式（默认get）

方法	提交方式	特点
get	在url后直接拼接“?name1=value1&name2=value2&name3=value3…”	提交的数据大小有限制
post	将数据打包放到请求体中再提交到服务器	无提交数据大小限制

input 输入域标签

	属性简介	text	password	radio	checkbox	submit	reset	button
value	设置提交的默认值	输入框中显示的内容		选项框提交的内容		按钮上显示的内容
placeholder	设置友好提示	设置友好提示（不可提交）
maxlength	设置输入框中可放置的最大长度	设置输入框中可放置的最大长度
name	设置键；标识了数据的分组（用于提交数据，在服务器中通过键获取value值）需要拿到的数据都一定要有name 同一范畴的选项一定在同一name下			同一分组中的单选按钮是互斥的

<body>
<form method="get" action="http://www.baidu.com">		
	个人信息<hr />
	姓名：<input type="text" placeholder="请输入姓名" name="user"/><br>
	密码：<input type="password" placeholder="请输入密码" name="pw"/>
	<br>性别：
	<input type="radio" name="gender" id="radio1" value="1"/><label for="radio1">男</label>
	<input type="radio" name="gender"  id="radio2" value="2"/><label for="radio2">女</label>
	地区：
	<select name="area">
		<option value="1">上海</option>
		<option value="2">浙江</option>
		<option value="3">江苏</option>
		<option value="4">其他</option>
	</select>
	<br>
	<br>
	兴趣爱好<hr />
	<input type="checkbox" name="interest" value="1"/>唱歌
	<input type="checkbox" name="interest" value="2"/>旅行
	<input type="checkbox" name="interest" value="3"/>烹饪
	<input type="checkbox" name="interest" value="4"/>健身
	<br><hr />
	<input type="submit" value="提交" /><input type="reset" value="清空" /><button type="button">这个按钮相当于提交</button>
</form>
<button type="button">这个按钮没有用</button>
</body>

select - option 下拉选项标签

button 按钮标签

不绑定事件的话，在form标签内部相当于submit，在form表单以外没有任何作用；
绑定事件的话，在form标签内外都是正常触发事件

二、CSS

cascading style sheet 层叠/层级/级联样式表

	定义位置	优先级	应用范围	定义方式	优点
内联	开始标签内部，style属性	高	小	style属性	灵活
内部	head中，style标签中	中	中	标签选择器（标签名{}）元素/类选择器（.类名{}）
外部	css文件中	低	大		应用范围广

<!--内部样式表-->
<style type="text/css">
	.button{
		font-size: 16px;
		color: azure;
		font-weight: 500;
		background-color: pink;
		font-family: "微软雅黑";
		border: none;
		border-radius: 20px;
		width: 100px;
		height: 45px;
	}
</style>