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>

-主动闭合标签<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标签

- 图标 &nbsp(空格) ; &gt(大于号) ; &lt(小于号)

- <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

用于点击文字，使得关联的标签获取光标

- 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前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...

随机推荐

Redis模块学习笔记（一）RediSearch简单使用
说明:安装的Redis服务器必须为 4.0 以上版本,通过info命令查看 > INFO redis_version: 一.安装 RediSearch git clone https://git ...
TestNg失败重试机制
TestNg提供了失败重试接口IRetryAnalyzer,需要实现retry方法: package com.shunhe.testngprac.retry; import org.testng.IR ...
scapy的安装
我是安装了sulley,这里安装了pcapy的模块. https://github.com/zlorb/scapy ----按照此链接的步骤安装但是在安装pycrypto模块出现了错误. 这里通 ...
js 获取DOM的style属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
python - class类 (五) 继承补充-子类继承父类属性/函数方法
子类继承父类属性/函数方法: #方式一:(原生方式,不建议使用) class Dongwu(object): def __init__(self,name,sex,old): self.name = ...
Android中的Service：Binder，Messenger，AIDL
http://blog.csdn.net/luoyanglizi/article/details/51594016 http://blog.csdn.net/luoyanglizi/article/d ...
android 常见分辨率与DPI对照表
分辨率对应DPI ldpi QVGA (240×320) mdpi HVGA (320×480) hdpi WVGA (480×800),FWVGA (480×854) xhdpi 720P( ...
20165227《网络对抗技术》Exp0 Kali安装 Week1
2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 kali下载:镜像文件通过同学获得 kali具体安装步骤: 打开VMware,点击新建虚拟机,进行创建创建完成 ...
【PE结构】由浅入深PE基础学习-菜鸟手动查询导出表、相对虚拟地址(RVA)与文件偏移地址转换(FOA)
0 前言此篇文章想写如何通过工具手查导出表.PE文件代码编程过程中的原理.文笔不是很好,内容也是查阅了很多的资料后整合出来的.希望借此加深对PE文件格式的理解,也希望可以对看雪论坛有所贡献.因为了解 ...
初识CPU卡、SAM卡/CPU卡简介、SAM卡简介【转】
初识CPU卡.SAM卡/CPU卡简介.SAM卡简介 IC卡按照接口方式可分为接触式卡.非接触式卡.复合卡:按器件技术可分为非加密存储卡.加密存储卡和CPU卡. 加密存储卡是对持卡人的认证,只有输入正确 ...

day14--前端HTML、CSS

day14--前端HTML、CSS的更多相关文章

随机推荐

热门专题