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

- 图标 &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         

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

<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的更多相关文章

  1. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  2. 前端之css

    前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...

  3. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  4. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  5. 第二篇:web之前端之css

    前端之css   前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...

  6. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  7. 前端基础——css

    前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.

  8. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  9. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  10. 前端开发css禁止选中文本

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

随机推荐

  1. 转--python 面试题

    # 每一题都值得好好琢磨钻透 [原文地址](http://www.cnblogs.com/Allen-rg/p/7693394.html)1.Python是如何进行内存管理的? 答:从三个方面来说,一 ...

  2. STM32Cube自学-1

    为了方便调试,使用Keil5+Proteus.1.新建Proteus STM32项目,选择STMF103C6 2.新建STM32CubeMX项目,选择同型号CPU,选择UART1,Asynchrono ...

  3. C# 窗体内有子控件时鼠标检测

    public partial class FormPop : Form { public FormPop() { InitializeComponent(); } private void FormP ...

  4. 20155117王震宇 2016-2017-2 《Java程序设计》第六周学习总结

    教材学习内容总结 IO流的分类: 根据流的数据对象来分: 高端流:所有的内存中的流都是高端流,比如:InputStreamReader 低端流:所有的外界设备中的流都是低端流,比如InputStrea ...

  5. MySQL中查询行数最多的表并且排序

    #切换到schema use information_schema; #查询数据量最大的30张表 并排序 select table_name,table_rows from tables order ...

  6. java gc

    mark下来 https://plumbr.eu/handbook/what-is-garbage-collection

  7. Mysql 插入中文错误:Incorrect string value: '\xE7\xA8\x8B\xE5\xBA\x8F...' for column 'course' at row 1

    create table my_user (    id tinyint(4) not null auto_increment,    account varchar(255) default nul ...

  8. Struts通配符映射

  9. 重新学习Servlet二

    重新学习Servlet public abstract class HttpServlet extends GenericServlet package com.xh.test.api; import ...

  10. Docker安装ActiveMQ

    ⒈下载 docker pull webcenter/activemq ⒉运行 docker run -d --name myactivemq -p 8161:8161 -p 61613:61613 - ...