0
点赞
收藏
分享

微信扫一扫

Web前端笔记+表单练习+五彩导航

殇感故事 03-23 06:30 阅读 2
前端笔记

一、笔记

表单:数据交互的一种方式

          登录、注册、搜索

<from>

<input type=""> ---

<input type="text"> --- 普通输入框,内容在一行显示

<input type="password"> --- 密码框

<input type="radio">男 --- 单选框

eg:性别

<input type="radio">男 等等

name属性,表明是一组单选

eg:<input type="radio"name="sex">男<input type="radio"name="sex">女

默认选中 --- checked

Eg:默认选中女type="radio"name="sex">男<input type="radio"name="sex"checked>女

<br /> --- 换行

<input

type="checkbox"> --- 多选框

Eg:喜欢的水果

<input type="checkbox" name="hobby">榴莲<input type="checkbox"name="hobby">香蕉<input type="checkbox"name="hobby">火龙果name="hobby">莲雾

点字会勾选 --- 放大光标作用率

Eg1:<label>type="radio"name="sex">男</lebel>

Eg2:

<input type="checkbox"name="hobby"> <label for="huolongguo">火龙果</label>

eg:最喜欢的人

<input type="checkbox">卢洋洋

<input type="file"> --- 上传文件,一次传多个 --- multiple

昵称:<input type="text"

placeholder="请输入4-6位汉字"readonly> --- 输入时消失,删除玩输入的字符后出现

Readonly -- 只读

<input type="submit" value=""> --- 按钮

不写value显示为提交

有则写啥有啥

每写一个input记得把name带上,才能看到其状态

将此项设置为必填项 --- require

<button>点击</button> --- h5的上传

<input type="button" value="普通按钮"> --- 不会上传数据

<input type="email"> --- 不写@不给上传数据

<input type="color"> --- 选颜色

<input type="time"> ---

下拉框 --- <select name="city">

<option> value="上海"</option>

<option> value="广州" selected>广州</option>

<option> value="北京"</option>

</select>

<button>提交</button>

 selected --- 默认

<textarea name="留言" cols="300" row="10" maxlengrh="200" placeholder="请留下你的留言"</textarea>

get/post 区别

1.get相对于post较为安全

2.http协议上规定不同

框架标签:嵌入广告

<iframe src="https://www.taobao,com" frameborder="1"></iframe>

<a href="">点击进入</a>

CSS 层叠样式表

       1

<style>

/*选择器{

属性名:属性值;

属性名:属性值;

}*/

div {

width: 300px;

height: 300px;

background-color:green;

}

</style>

<!--外链----推荐 -->

行内

内嵌

1.基本选择器:

标签选择器

类选择器

id选择器

通配符选择器(优先级最低)

2.

子代选择器

后代选择器

逗号选择器

.类名{}

标签{}

#id名{}

*

Ul>li{}

Ul li{}

选择器1,

选择器2

直到选择器你{

}

3.属性选择器

应用软件:c/s架构(客户端服务器)b/s(浏览器服务器)

web前端:html5  css3  javascript

html5:超(超链接)文本 标记语言

网页中包括:文字,图片,视频,音乐,超链接

标签:

双标签语法规范:<标签名> <标签名> 内容 </标签名></标签名>   (可相互嵌套)

单标签:<input type ="text"> (不用尾标签)

属性:定制标签行为,每一个标签存在自身的属性,互不相通

格式:<标签名 属性名="属性值">  <marquee loop="1">

当属性名=属性值时可以只写属性值(disabled =="disabled" == disabled ="")

全局属性:

常用标签:

标题标签:<h1>  </h1>  —— <h6> </h6> 逐级减少,单独换行

换行标签:文本后 <br / >

水平线标签 :文本后<hr / >

段落标签:<p> </p>

文本格式化:

加粗标签:<strong> </strong> <b> </b>

倾斜标签:<em> </em> <i> </i>

下划线标签:<u> </u> <ins> </ins>

上标签:<sup> </sup>

下标签:<sub> </sub>

删除线标签:<del> </del> <s> </s>

原样输出:<pre> </pre>

行内标签:只会占用自身内容的位置,不会独占一行  <span></span>

块标签:独占一行  <div></div> <h1></h1>

图像标签:<img src="../(返回文件上一级) "  图片路径:绝对路径,相对路径,网络路径

width="200px"

height="400px"

border="10px"(边框)

title=""(注释)

align="top/center/left/right/bottom"(对齐方式)

vspace="200px"(垂直间隔距离)

>

视频标签:<video src=""

controls(播放键)

loop(循环播放)

autoplay muted(自动播放+静音)

 >  </video>

音频标签:<audio src=""

controls(播放键)

loop(循环播放)

autoplay muted(自动播放+静音)

 >  </audio>

超链接标签:<a href=" " 

targrt="_blank"

> 点击进入新的页面 </a>

锚链接标签:<a href="# "> <

表格标签:

<table width="400px"  border="2" (边框)cellspacing="0"(间距)>

<caption>2024年下学期课表</caption>

<tr align="center" bgcolor="">(第一行)

<td rowspan="2">(跨行)语文</td>

<td>数学</td>

<td>英语</td>

</tr>

<ty align="center">(第二行)

<td>数学</td>

<td>英语</td>

</tr>

<ty align="center">(第三行)

<td>语文</td>

<td>数学</td>

<td>英语</td>

</tr>

</table>

特殊字符:

   有序列表:

你喜欢吃什么

<ol type="">

<li>苹果</li>

<li>香蕉</li>

<li>雪梨</li>

</ol>

   无序列表:

你喜欢吃什么

<ul type="">

<li>苹果</li>

<li>香蕉</li>

<li>雪梨</li>

</ul>

   自定义列表:

<dl>

<dt>你喜欢吃什么</dt>

<dd>苹果</dd>

<dd>香蕉</dd>

<dd>雪梨</dd>

</dl>

4.伪类选择器

描述某一个标签的状态

访问前

:link{

}

访问后

:visited{

}

鼠标悬停时

:hover{

}

鼠标点击时

:active{

}

需按顺序写

<style>

ul li:nth-child(6) {

Background-color:pink;

}

Li:last-child{

Background-color:aqua;

}

5.伪元素选择器

字体倾斜 --- font-style

行高 --- line-height

文本装饰

层叠性:相同的选择器,设置相同的属性,遵循就近原则,哪一个样式距离结构近就用哪个

继承性子标签会继承父标签的某些属性(字体颜色、字号)

优先性

二、表单练习

三、五彩导航

举报

相关推荐

0 条评论