前端打卡第二天

1.插入图片

/表示下一级

../表示返回上一级

px：像素（在html语法里，px可加可不加）

插入图片时，如果只设置了宽度，没有设置高度，默认等比例缩放

属性：title:鼠标悬停显示提示；alt:当图片加载失败时，显现，占用空间。

2.超链接

主要用来实现页面和页面之间的跳转

<a href="地址"></a>

地址（路径）的找法和插入图片的路径方法是一样的

自带特点：有下划线，文字是蓝色

属性：title:悬停提示        href="#"为空链接，自动返回到页面最顶部

属性	值	描述
charset	char_encoding	HTML5 不支持。规定目标 URL 的字符编码。
coords	coordinates	HTML5 不支持。规定链接的坐标。
downloadNew	filename	指定下载链接
href	URL	规定链接的目标 URL。
hreflang	language_code	规定目标 URL 的基准语言。仅在 href 属性存在时使用。
mediaNew	media_query	规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。
name	section_name	HTML5 不支持。规定锚的名称。
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。
rev	text	HTML5 不支持。规定目标 URL 与当前文档之间的关系。
shape	default rect circle poly	HTML5 不支持。规定链接的形状。
target	_blank _parent _self _top framename	规定在何处打开目标 URL。仅在 href 属性存在时使用。 _blank：新窗口打开。 _parent：在父窗口中打开链接。 _self：默认，当前页面跳转。 _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
typeNew	MIME_type	规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。 注：MIME = Multipurpose Internet Mail Extensions。

3.<div>标签和<span>标签

<div></div>：一般作为容器（盒子）

<span></span>:一小节一小段，不换行

会换行的标签：p、div、h1-h6、ul、ol、li、dl、dt、dd、br、hr

不会换行的标签：a、img、span、b、strong、i、em

4.表单

主要是用来收集用户信息

<form></form>

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果

input属性：

属性	值	描述
accept	audio/* video/* image/* MIME_type	规定通过文件上传来提交的文件的类型。 (只针对type="file")
align	left right top middle bottom	HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image")
alt	text	定义图像输入的替代文本。 (只针对type="image")
autocompleteNew	on off	autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
autofocusNew	autofocus	属性规定当页面加载时 <input> 元素应该自动获得焦点。
checked	checked	checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
disabled	disabled	disabled 属性规定应该禁用的 <input> 元素。
formNew	form_id	form 属性规定 <input> 元素所属的一个或多个表单。
formactionNew	URL	属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
formenctypeNew	application/x-www-form-urlencoded multipart/form-data text/plain	属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
formmethodNew	get post	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
formnovalidateNew	formnovalidate	formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formtargetNew	_blank _self _parent _top framename	规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
heightNew	pixels	规定 <input>元素的高度。(只针对type="image")
listNew	datalist_id	属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
maxNew	number date	属性规定 <input> 元素的最大值。
maxlength	number	属性规定 <input> 元素中允许的最大字符数。
minNew	number date	属性规定 <input>元素的最小值。
multipleNew	multiple	属性规定允许用户输入到 <input> 元素的多个值。
name	text	name 属性规定 <input> 元素的名称。
patternNew	regexp	pattern 属性规定用于验证 <input> 元素的值的正则表达式。
placeholderNew	text	placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。
readonly	readonly	readonly 属性规定输入字段是只读的。
requiredNew	required	属性规定必需在提交表单之前填写输入字段。
size	number	size 属性规定以字符数计的 <input> 元素的可见宽度。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
stepNew	number	step 属性规定 <input> 元素的合法数字间隔。
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	type 属性规定要显示的 <input> 元素的类型。
value	text	指定 <input> 元素 value 的值。
widthNew	pixels	width 属性规定 <input> 元素的宽度。 (只针对type="image")

实例：

<form action="" method="">
<!--文本输入-->
Username: <input type="text" name="user"><br>
<!--密码输入-->
Password: <input type="password" name="password">
<!--单选按钮-->
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
<!--复选框-->
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
<!--提交按钮-->
<input type="submit" value="Submit">
<!--重置按钮-->
<input type="reset" value="Reset">
<!--按钮-->
<input type="button" value="Button">
<button>按钮</button>
</form>

按钮作为input标签的属性值来用，不会进行页面的提交，仅仅只是用来跳转

按钮作为标签来用，会进行页面提交，功能类型submit

 5.CSS

cascading style sheets  层叠样式表

主要是用来修改页面的显示信息

三种样式表的创建：

1.行内样式表（嵌入式样式表）

语法：<标签名称 style="属性:属性值；...."></标签名称>

实例：

2.内部样式表

语法：

        <head>

                <style type="text/css">

                        标签名称：{

                                属性：属性值；

                                .......

                          }

                </style>        

            </head>

只作用于当前文件

3.外部样式表

引入外部样式表（同步加载）

语法：<head>

                <link href="路径"   rel="stylesheet"   type="text/css">

            </head>

只作用于所有相关联的文件。

导入外部样式表（异步加载，先加载页面，后加载样式）

语法：

          <head>

                <style type="text/css">

                        @import url(名字的.css);

                </style>        

            </head>

权重（优先级）：

给同一个标签设置相同的属性，会发生冲突，这时就有优先级。

样式表的权重：行内样式表>（内部样式表=外部样式表，权重相同，执行后书写的那个）

ps快捷键：ctrl+R 标尺，对着标尺上的数字右击，把厘米改成像素

                按住shift键，拖到参考线，会自动对齐像素点

                F8，调出信息面板

                ctrl+,放大        ctrl-，缩小

                空格，拖动