HTML、CSS
2021-04-10 03:34
标签:实现 设置 下拉 jpg target 名称 颜色 title 按钮
一、HTML
1.概念:是最基础的网页开发语言,
* 标记语言:
由标签构成的语言。 如 html,xml;
标记语言不是编程语言;
2.基本标签
1)文件标签:构成html最基本的标签
* html:html文档的根标签
* head:头标签。用于指定html文档的一些属性。引入外部的资源
* title:标题标签。
* body:体标签
* :html5中定义该文档是html文档
2)文本标签:和文本有关的标签
* 注释:
*
to :标题标签
* h1~h6:字体大小逐渐递减
*
:段落标签
*
:换行标签
*
:展示一条水平线
* :字体加粗
* :字体斜体
* :字体标签
*
* 属性定义:
* color:
1. 英文单词:red,green,blue
2. rgb(值1,值2,值3):值的范围:0~255 如 rgb(0,0,255)
3. #值1值2值3:值的范围:00~FF之间。如: #FF00FF
* width:
1. 数值:width=‘20‘ ,数值的单位,默认是 px(像素)
2. 数值%:占比相对于父元素的比例
3.图片标签
相对路径: ./:代表当前目录
../:代表上一级目录
4.列表标签:
* 有序列表:1. ol 、2.li:
* 无序列表: 1. ul 、 2. li
5.链接标签
属性:
href:指定访问资源的URL(统一资源定位符)
target:指定打开资源的方式:
1) _self:默认值,在当前页面打开
2)_blank:在空白页面打开
6.HTML的表单标签
6.1.表单:
* form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围
属性:* action:指定提交数据的URL
* method:指定提交方式:
get :1. 请求参数会在地址栏中显示。会封装到请求行中.
2.请求参数大小是有限制的。
3.不太安全
post: 1.请求参数不会再地址栏中显示。会封装在请求体中
2.请求参数的大小没有限制。
3.较为安全
表单项标签:
input:可以通过type属性值,改变元素展示的样式
tyep属性:
text:文本输入框,默认值 ,placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息;
password:密码输入框;
radio:单选框 ; 注意:1.要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样;2.一般会给每一个单选框提供value属性,指定其被选中后提交的值;3.checked属性,可以指定默认值
checkbox:复选框; 注意:1.一般会给每一个单选框提供value属性,指定其被选中后提交的值;2.checked属性,可以指定默认值
file:文件选择框;
hidden:隐藏域,用于提交一些信息。但不在页面显示
按钮:
* submit:提交按钮。可以提交表单
* button:普通按钮
* image:图片提交按钮
* src属性指定图片的路径
label:指定输入项的文字描述信息 ;作用:label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
用法:
label for="username"> input type="text" id="username">
select: 下拉列表
子元素:option,指定列表项
textarea:文本域 ; cols: 指定列数,每一行有多少个字符 ; rows: 默认多少行。
二、CSS
1.css的使用:
1.1.内联样式:
div style="color:red;">hello cssdiv>
1.2.外联样式
style>
div{
color:blue;
}
style>
div>hello cssdiv>
1.3.外部样式
div{ color:green; } link rel="stylesheet" href="css/a.css"> div>hello cssdiv> div>hello cssdiv>
2.css的语法:
2.1.格式:
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
2.2.选择器:
1)基础选择器:
id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一; 语法:#id属性值{}
style>
#div5{
font-size: 20px;
color: red;
}
style>
div id="div5">
逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!55
div>
元素选择器: 选择具有相同标签名称的元素 ; 语法: 标签名称{}; 注意:id选择器优先级高于元素选择器
style>
div{
font-size: 20px;
color: pink;
}
style>
div>
逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!11
div>
类选择器:选择具有相同的class属性值的元素; * 语法:.class属性值{}; * 注意:类选择器选择器优先级高于元素选择器
.div2{ font-size: 20px; color: pink; } div class="div2"> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!22 div>
2.3.其他选择器:
选择所有元素:语法: *{};
并集选择器: 语法: * 选择器1,选择器2{};div,p{}
子选择器:筛选选择器1元素下的选择器2元素 ; 语法: 选择器1 选择器2{} div p{}
父选择器:筛选选择器2的父元素选择器1; 语法: 选择器1 > 选择器2{} div > p{}
属性选择器:选择元素名称,属性名=属性值的元素 ; 语法: 元素名称[属性名="属性值"]{}
style>
input[type=‘text‘]{
background: #FF0000;
}
input[type=‘password‘]{
background: #FFC0CB;
}
style>
用户名;input type="text" name="username"/>br />
密码:input type="password" name="password"/>
伪类选择器:选择一些元素具有的状态; 语法: 元素:状态{}
* link:初始化的状态;
* visited:被访问过的状态
* active:正在访问状态
* hover:鼠标悬浮状态
3. 属性
1. 字体、文本
* font-size:字体大小
* color:文本颜色
* text-align:对其方式
* line-height:行高
2. 背景
* background:
3. 边框
* border:设置边框,符合属性
4. 尺寸
* width:宽度
* height:高度
5. 盒子模型:控制布局
* margin:外边距
* padding:内边距
* 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
* float:浮动
* left
* right
HTML、CSS
标签:实现 设置 下拉 jpg target 名称 颜色 title 按钮
原文地址:https://www.cnblogs.com/cqyp/p/12434617.html