JavaSE.20190521.锚链接.Form表单.CSS(一)._javaswing做锚链接-优快云博客

本文链接：https://blog.youkuaiyun.com/LiangEdward/article/details/90410440

本文介绍了前端开发相关知识。包括锚链接，它是特殊超链接，可在同一页面不同位置跳转；Form表单用于收集用户信息，介绍了其常用属性和元素；还详细讲解了CSS，包括简介、基本语法、使用方式、选择器、常用样式以及盒子模型等内容。

一.锚链接（特殊的超链接）

锚点(anchor)：其实就是超链接的一种，一种特殊的超链接

普通的超链接，<a href="路径"></a> 是跳转到不同的页面

而锚点，<a href="路径"></a> 可以在同一个页面中不同的位置间跳转

可以看到，跳转到锚点的超链接跟普通的超链接格式是一样的

1.使用锚点的步骤：

1）先建立锚点目标，

如上所述，锚点可以在同一页面的不同位置间跳转，其实就是在元素间跳转，

常用的场景就是，页面很长，让用户方便在页面不同部分间跳转

建立锚点目标，只需要给目标元素增加id或者name即可，推荐id：

2）要创建跳转到id="test"的div的锚点，

注意：1.锚点的超链接路径一定包含"#",而后面紧跟元素的id或者name

(所以id和name必须一样，其实我试了有时name是不生效的)

2.锚点使用总结：

1）建立锚点的元素必须要有id或name属性，最好两个都有

2）锚点超链接一定包含井号"#",锚点超链接都在链接的最末端，具体看后面例子

3）同一个页面不同部分的跳转，锚点的写法

目标元素：<p id="test"></p> 锚点超链接：<a href="#test"></a>

4）不同页面跳转，同时存在锚点

目标元素：a.html页面的<div id="test"/> 锚点超链接：<a href="a.html#test"></a>

（先跳到a.html页面，然后再寻找id=test的元素）

5）不同页面带参数跳转，同时存在锚点

目标元素：a.php?p=abc页面的<div id="test"/> 锚点超链接：<a href="a.php?p=abc#test"></a>

二.Form表单

1.表单使用form标签定义

表单是用来收集用户信息发送至服务器进行处理

2.form常用属性:

action 数据发送的服务器地址

name form标签的名字

enctype 如果存在文件上传需要指定二进制传输 multipart/form-data method

提交方式 get post

3.表单元素:
name属性需要提交值得表单元素必须添加name属性,没有name属性没有提交的能力区分后台的唯一
  class : css用到
  id : js用到区分前台页面元素的唯一
value 值
input标签定义大多数表单元素
type属性的值来区分不同作用
text普通文本框 name value
password 密码加密 name
radio 单选框如果单选框中只能选择一个,需要设置为一组,name属性相同
  checkbox 多选框
submit 提交
button 普通按钮
reset 重置
button 按钮 type属性值
<label> 标签为input 元素定义标注（标记）。
4.常用属性:
multiple多选
required 必填属性
autofocus 自动聚焦
readonly 只读可以提交不能修改
disabled 禁用不能提交显示灰色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   
    <fieldset>
        <legend><h3>用户相亲表</h3></legend>
        <form action="" enctype="multipart/form-data">
            <p>
                用户名: <input type="text" name="uname" value="张三"  readonly>
            </p>
            <p>
                银行卡密码: <input type="password" name="pwd" value="张三" disabled>
            </p>
            <p>
                性别: 男<input type="radio" name="gender" value="man" checked>
                <label for="woman">女</label><input type="radio" name="gender" value="woman" id="woman">
            </p>
            <p>
                兴趣爱好: 敲代码<input type="checkbox" name="hobby" value="code" checked="checked">
                看小说<input type="checkbox" name="hobby" value="novel">
                看直播<input type="checkbox" name="hobby" value="living">
            </p>
            <p>
                生活照: <input type="file" name="life">
            </p>
            <p>理想型:
                <select name="wife" multiple>
                    <option value="luoli">萝莉型</option>
                    <option value="yeman">野蛮型</option>
                    <option value="wenrou" selected="selected">温柔型</option>
                </select>
            </p>
            <p>
                求偶宣言:
                <textarea name="info" id="" cols="30" rows="10" placeholder="明天的你会感谢今天努力的自己!!!"></textarea>
            </p>
            <input type="submit" value="submit">
            <input type="button" value="button" onclick="alert(234)">
            <input type="reset" value="reset">

            <button type="button">按钮</button>
            <button type="reset">重置</button>
            <button >提交</button>
        </form>
    </fieldset>
</body>
</html>

三.CSS

1.简介：

CSS（Cascade Style Sheets）层叠样式表, 是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

CSS是用来美化网页用的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能。

2.CSS基本语法

CSS 样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个 CSS属性和属性值。

选择器名{

属性 : 属性值;

......

}

div{

background-color : red;

}

注意：

css声明要以分号;结束，声明以{}括起来

建议一行书写一个属性

若值为若干单词，则要给值加引号，如 font-family: "agency fb";

如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的(学到js时就会有所了解)。

3.CSS的使用

1）css 层叠样式表
行内样式表:元素上提供一个style属性,属性值中给样式
内部样式表:html的内部,提供一个style标签对,标签对中给样式
外部样式表:定义一个样式表文件,定义样式,把这个文件引入到指定的html页面
样式:
名称:值;
选择器: 选择到某个元素
选择器{
样式1;
样式2;
...
}
样式表的优先级:有限显示
谁离元素更近就优先显示谁

2）基础选择器:
id,根据元素的id属性值选择到某个元素唯一

类class:根据元素的class属性值选择到一个或者一组元素
.+class属性的名字
class属性值
元素|标签可以给多个,不唯一
根据标签名选择到一组或者一个元素
*
作用到所有元素
清除浏览器默认样式:
*{
padding:0;
margin:0;
}
优先级: id>class>元素>通配符

3）群组选择器:
选择器1,选择器2,.. {}
后代选择器（派生选择器）
子元素选择器第一代子元素

属性选择器
伪类选择器 :
hover 当鼠标悬停在元素上时显示的样式

4）常用样式:
①背景:
背景颜色
颜色:
颜色的英文单词
颜色十六进制 #
rgb()
rgba() a->透明度 0~1 0透明 1不透明
背景图片
背景图片是否重复

②color: 字体颜色

③text-align不能使用在行内元素, 元素内部内容的水平对齐方式
④line-height: 行高,默认一行中的内容,在这一行中是垂直居中的
⑤text-decoration 文本样式
underline 下划线
overline对文本添加上划线。
line-through对文本添加中划线，与HTML中的s和 strike 元素相同。
none 没有样式
⑥text-indent 设置文本首行缩进单位:px em文字个数
⑦font-family文本字体
⑧font-size 字体大小
⑨font-style 字体风格
⑴normal：文本正常显示；
⑵italic：文本斜体显示；
⑩font-weight 文字粗细
600以上粗体
600以下正常
⑪list-style 列表样式

4.盒子模型

能看见的内容的大小: 内容+内边距+外边距
背景的设置会自动延伸到内边距上

设置内外边距的时候:
1,2,4个值
border边框三要素:
border:宽度样式颜色;

display:设置元素的属性
block
inline
inline-block 行内块
拥有行内和块元素的特点,能设置宽高和同行显示

<img src="img/1.png" alt="" width="100px"> <a href="#">hehe</a>