form表单
'''获取前端用户数据并发送给后端服务器''' <from action = ""></from> #需要再form标签内部编写获取用户数据标签 #1属性action 控制数据的提交地址 方式1:写全路径 action = "http://www.aa7a.cn/user.php" 方式2:写后缀(自动补全IP和PORT) action = "user.php" 方式3:不写(朝网页所在的地址提交) action = "" '''URL:统一资源定位符(网址)'''
#2.input标签 获取用户各种类型数据的标签(html里面的变形金刚) type属性 text 正常展示的普通文本 password 密文展示 date 日历展示 radio 单选框 可以通过添加checked = "checked"设置默认值 ps:如果属性名和属性值相同,可以简写checked checkbox 多选 可以通过添加checked = "checked"设置默认值 ps:如果属性名和属性值相同,可以简写checked email 邮件格式数据 file 文件数据 可以通过添加multiple属性控制获取单个还是多个文件 submit 触发form表单提交数据的动作 reset 重置页面填写的数据 button 普通按钮默认没有任何功能 意味着以后可以给它添加任意的功能(js事件) #3select标签 下拉框 <select name= "province" id = ""> <option value = "BJ">北京</option> <option value = "SH">上海</option> <option value = "SZ">深圳</option> </select> 一个个的下拉选项是一个个option标签 默认是单选 也可以添加mutiple变成多选 #4textareab 获取大段文本内容 <textarea name = "desc"></textarea> ''' input标签中有两个非常重要的属性 1.name属性 类似于字典中的key(自己) 2.values属性 类似于字典中的value 用于区分具体数据含义 ps:我们在编写input标签的时候应该添加name属性 ''' #5.lable标签 专门给input标签配文字说明,也可以不使用 方式1 <label for = "d1">用户名:</label> <input type = "text" id="d1"> 方式2 <label>用户名: <input type ="text"> </label>
网络请求方式
'''最常见的网络请求方式有两种''' 1.get请求 朝服务器索要数据 2.post请求 朝服务器提交数据 #两种请求都可以携带数据 get请求是在url后面通过?组织数据 url?name = jason&pwd = 123&email = [email protected] post请求是在请求体中组织数据 HTTP协议请求数据格式 ''' get请求虽然可以携带数据 但是一般只用于不重要的数据携带 并且get请求携带数据的大小有限制 最多只能携带2KB左右 ''' form表单中有一个method属性 用于控制提交的方式 有两个选项 默认是get请求
css简介
#1语法结构 选择器 {属性名1:属性值1;属性名2:属性值2} #2语法注释 /*注释内容*/ ''' 一个正常的网页css样式是非常多的 就算专门开设css文件储存也很乱 这个时候就可以在css文件中通过注释来辅助辨别查找''' eg : /*博客园样式*/ /*导航条样式*/ /*左侧栏样式*/ /*右侧栏样式*/ #3多种引入css的方式 1.head内style标签内部直接编写css代码 建议在小白学习阶段可以使用 2.head内link标签引入外部css文件 工作中一般使用的都是link形式 符合标准 3.标签内部通过style属性直接编写 第三种也称之为"行内式"是最不推荐的一种方式 因为它会将HTML和css柔和到一起 增加了耦合度 #问:CSS是用于调整HTML标签样式的 但是同一个页面上有很多相同的标签并且可能需要有不同的样式
先学会如何查找标签
之后才能学会如何给标签修改样式
css基本选择器
#1标签选择器(范围查找) 直接通过标签名查找标签 h1{ color:deeppink;/*让所有h1标签内部所有的字体颜色都变为深粉色*/ } #2类选择器(范围查找) 通过标签class属性查找标签(关键性符号是句点符) .c1{ color:greenyellow;/*将所有class属性中含有c1的标签内部字体颜色改为亮绿色 */} #3 id选择器 通过标签id属性查找标签 #id{ color:orange; } #4通用选择器(了解,几乎不用) 查找所有标签 *{ color:blue; }
css组合选择器(重要)
''' 补充:标签关系 <div>'div1 <div>div2 <p>p1</p> </div> <p>p2 <span>span1</span> </p> <span>span2</span> </div> 通过嵌套层级来表示亲属关系 1.对于div1来说div2/p2/span2都是儿子 2.对于div2/p2/span2来说div1就是父亲 3.对于p1来说div2是父亲/div1是爷爷(可以将div1和div2统称为祖先) 4.对于span2来说div2/p2是哥哥 span2是弟弟 5.div1内部所有的标签,无论层级都可以称之为是div1的后代 ps:判断的时候一定要看层级关系 ''' #1.儿子选择器(关键符号是大于号) #d1 > span {查找id是d1标签内部所有的儿子span color:red; } #2.后代选择器(关键符号是空格) #d1 span {查找id是d1标签内部所有的后代子span color:red; } #3.毗邻选择器(关键符号是加号) #d1 + a {查找id是d1标签同级别下面紧挨着第一个a color:red; } #4.弟弟选择器(关键符号是小波浪号) #d1 ~ a {查找id是d1标签同级别下面所有a标签 color:red; }
属性选择器
#根据标签内部属性名和属性值查找标签(关键符号是中括号) 1.方式1:直接通过属性名查找 [type]{ background-color: red; } 2.方式2:属性名是type并且值是text的标签 [type="text"]{ background-color: red; } 3.方式3:属性名是type并且值是text的div标签 div [type="text"]{ background-color: red; }
分组与嵌套
#1.分组 div,p,span {查找div或p或span color:red; } #2嵌套 #d1,.c1,span{查找id是d1或class包含c1或span color:red; } ''' 综合玩法 玩法1 div#d1 查找id是d1的div标签 div.c1 查找class包含c1的div标签 玩法2 div #d1 查找div内部id是d1后代的标签 #d1 > .c1 查找id是d1的内部class包含c1的儿子标签 '''
伪类选择器
#1鼠标悬浮 p:hover{ 鼠标移动到p标签上方 字体颜色动态修改为橙色 color:orange; } #2获取焦点(指的是input输入框被选中的状态) input:focus { 输入框被鼠标左键选中(聚焦) background-color:black; }
标签:color,标签,选择器,查找,属性,前端开发,css,d1 From: https://www.cnblogs.com/Milk1/p/17769522.html