day14--前端HTML、CSS
HTML是一个裸体的人，CSS穿上华丽的衣服，JS动起来。
HTML
1、 -一套规则，浏览器识别的规则
2、 开发者：
学习HTML规则
开发后台程序
- 写HTML文件（充当模板的作用）
- 数据库获取数据，然后替换到HTML文件的指定位置（Web框架）
3、本地测试
- 找到文件路径，直接浏览器打开
- pycharm打开测试（可能偶尔会出问题，跟自己理想有出入，使用本地打开）
4、编写Html文件
-doctype对应关系
-html标签，标签内部属性lang="en",每个文件只能有一个html标签
-注释： <!-- 内容 -->
5、标签分类
-自闭合标签 自己关闭<meta> ，自闭合的标签很少<br> <link>
<meta charset="UTF-8">
-主动闭合标签<title>标题</title>
6、head标签
-<meta> 编码，跳转，刷新，关键字，描述，IE兼容
- <title></title>标签 标题
- <link />
指定标题图标（<link rel="shortcut icon" href="//common.cnblogs.com/favicon.ico" type="image/x-icon" />）
- <style />
- <script/>
7、body标签
- 图标  (空格) ; >(大于号) ; <(小于号)
- <p></p>标签，段落 <br>换行标签
- <h1></h1> ----------------<h6></h6>标签，标题
- <div>标签，块级标签（白板）
================= 小总结 ================
所有的标签分为：
块级标签：<h>系列标签（加大加粗），<p>标签（段落和段落之间有间距）<div>标签(白板)块级的白板，使用最多的标签
行内标签：<span></span>标签（白板）自身什么特性都不带
标签之间可以嵌套
标签存在的意义，定位操作，JS获取的时候比较方便
- input系列
input type = "text" -name属性，方便后台取数据，value属性，默认值
input type = "password" -name属性，让后台取数据
input type = "submit"
input type = "button"
input type = "radio" - value属性，name属性（name属性相同，互斥），设置默认值，checked="checked",默认被选择
input type = "checkbox" - 复选框，name属性(批量操作，获取批量数据)，设置不同的value进行区分
input type = "file" - 设置name属性，指定提交的位置，但是type="file"依赖form表单的一个属性，不然上传不成功的，enctype="multipart/form-data"设置了才能上传文件。enctype="multipart/form-data"设置文件上传位置。
input type = "reset" - 重置，重置form里面的输入，清空，重新输入
<textarea>默认值</textarea> -name属性方便提交到后台，默认值放中间，多行文本输入的情况
select标签 -name属性，内部option,value提交到后台，size,multiple多选
能够向后台提交数据的标签：<input /> <textarea></textarea> <select></select>三个标签，其他的都是点缀用的，设置样式
-a标签（行内标签）
- 跳转
- 锚 href="#某个标签的ID" 标签的ID不允许重复，章节跳转用的
- img标签
- src属性 图片地址
- title属性 图片的名称
- alt属性 图片损坏显示的信息
- <ul><li></li></ul> 列表，默认是点的形式显示在网页上面。
- <ol><li></li></ol> 列表，默认是以1.的形式显示
- <d1><dt><dd></dd></dt></dl> 层级显示的方式，分层显示模式
- 列表
- ul <li></li>
- ol <li></li>
- dl <dt><dd>
- 表格<table></table>
table
thead
tr th（表头）
tbody
tr td（列）
colspan #列合并，合并单元格
rowspan #行合并，合并单元格
- lable
用于点击文字，使得关联的标签获取光标
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
- fieldset标签
用于复选框组，在里面添加开口的形式
legend
- div标签 <span>标签 <h>系列标签
-20个标签
CSS
在标签上设置style属性：
background(背景色)
2.在<head>里面，style标签中写样式
- id选择区与#号结合使用
#i1{
background-color:chartreuse;
height:48px;
} 重用行比较差，每次都要写
- class选择器
.名称即可(点)
.名称{
}
<标签 class="">
- 标签选择器
div{
background-color:red;
height:40px;
}
所有的div设置上述样式，标签选择器
- 层级选择器
.c1 .c2 div{
backgrond-color:red;
height:40px;
}
代表的是应用在class属性等于c1下面的标签class属性等于c2的div标签
- 组合选择器
#i1,#i2,#i3{
background-color:green;
height:36px;
}
对id等于i1,i2,i3的标签使用上述样式
- 属性选择器
input[type="text"]{width:100px;height:200px]
表示对input标签中type属性为text的执行样式
PS:
优先级，标签上的style优先，编写顺序，就近原则
CSS样式写在单独文件中，提升样式的重用行，要在<head>标签中使用<link />标签
<link rel="stylesheet" href="CSS文件路径" /> 从文件中引入CSS的样式
3、注释：/* */
4、边框
style属性里面的border
-宽度、样式、颜色
border:4px dotted red;
border-left（左边框） border-right（右边框） border-top（上边框） border-buttom（下边框）
5、height
height（高度） font-size(字体大小） text-align:center(居中，左右居中）line-height:48px（水平居中）font-weight（加粗）
6、float
让标签浪起来，块级标签也可以进行堆叠,float="left",float="right"
<div style="clear:both;"></div>由于<div>标签飘起来以后，父标签被冲掉了，最后加上一个指令即可，清楚子标签中的<div>
7、display
块级标签和行内标签可以进行转换，
<div style="background-color:red;display:inline;">message</div> 将块级标签转换为行内标签
<span style="background-color:pink;display:block">转换为块级标签</span> 将行内标签转换为块级标签
display:inline
display:block
dispaly:inline-block 具有inline,默认自己有多少占多少，具有block可以设置告诉，宽度。
display:none 让标签消失
行内标签无法设置宽度和高度，块级标签可以设置宽度和高度。
8、padding margin(0,auto)
margin（外边距）
padding（内边距）
9、text-align
10、height,width,len-height,color,font-size,font-weight
-颜色
-位置
day14--前端HTML、CSS的更多相关文章
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 前端之css
前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 第二篇：web之前端之css
前端之css 前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 前端基础——css
前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
随机推荐
- fffmgg
翻译: 一.GOALS 你应该学习: 基本概念 安装ffmpeg和工具 编码视频 应用过滤器 分析视频 二.要求 这些幻灯片ffmpeg,ffprobe和ffplay的安装一些示例视频,例如:Big ...
- 从池子里的beta看秋香, 个性迥异
从池子里的beta看秋香, 个性迥异 前文里那十只个股为例, 统计了它们的beta值. 回顾如下: Num name code Beta 0 深圳燃气 601139 0.710 公用事业 1 分众传媒 ...
- Bulma - 基于 Flexbox 的现代化的 CSS 框架
Bulma 是一个基于 Flexbox 的现代化的 CSS 框架,设计的初衷就是移动优先(Mobile First),模块化设计,可以轻松用来实现各种简单或者复制的内容布局,浏览器支持:浏览器支持:C ...
- 寻路优化（二）——二维地图上theta*算法的设计探索
这篇文章是基于上一篇文章的研究上进行的,使得路径更加的平滑和自然,特此记录.有错误欢迎大家批评指正.如需转载请注明出处,http://www.cnblogs.com/Leonhard-/p/68660 ...
- CF1009E [Intercity Travelling]
这道题先考虑一种暴力n方做法 设\(f_i\)表示到\(i\)点所有情况的困难度之和(\(f_0=0\)),\(pre_i=\sum_{j=1}^{i} a_j\) 考虑从点\(j\)中途不经过休息站 ...
- 微信小程序的页面渲染（if/for）
下面,粗略的介绍一下微信小程序的条件渲染.列表渲染.数据绑定等,详细的内容大家可以去看微信小程序的API,在此只做简单描述,希望能帮助到大家 条件渲染 <!--wxml--> <vi ...
- iOS 中的 xml 解析
在ios 中解析xml 的方法有很多种 1.苹果原生 NSXMLParser:SAX方式解析,使用简单 2.第三方框架 libxml2:纯c语言,默认包含在ios sdk中,同时支持DOM 和 SA ...
- C语言中malloc函数返回值是否需要类型强制转换问题
1. 在C语言中, 如果调用的函数没有函数原型, 则其返回值将默认为 int 型. 考虑调用malloc函数时忘记了 #include <stdlib.h>的情况 此时malloc函数返回 ...
- freeRTOS中文实用教程3--中断管理之延迟中断处理
1.前言 嵌入式实时操作系统需要对整个系统环境产生的事件作出响应.可以采用中断方式也可以采用轮询方式来进行处理.如果采用中断方式,则希望ISR(中断服务例程)的处理时间越短越好. 注:必须说明的是,只 ...
- linux内核capable源代码分析【转】
转自:https://blog.csdn.net/sanwenyublog/article/details/50856849 linux内核里对于进程的权限管理有一个很重要的函数capable,以前看 ...