一、HTML本质以及在WEB程序中的作用　

　　1.一套规则，浏览器认识的规则。
　　2.开发者：
　　　　学习html规则
　　　　开发后台程序
　　　　　　- 写html文件（充当模板的作用）
　　　　　　- 数据库获取数据，然后替换到html文件的指定位置
　　3.本地测试
　　　　- 找到文件路径，直接浏览器打开
　　　　- pycharm打开；
　　4.编写html文件
　　　　- doctype对应关系
　　　　- html标签，标签内部可以写属性，只能有一个
　　　　- 注释： <!-- 注释内容 -->
　　5.标签分类：
　　　　- 自闭合标签
　　　　- 主动闭合标签

二、HTML的head内标签　　

　　head标签中
　　　　- <meta > 编码，跳转，刷新，关键字，描述，IE兼容
　　　　<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
　　　　- title标签
　　　　- <link /> 图标，
　　　　- <style />
　　　　- <script >

三、HTML的body内标签

　　body标签
　　　　- 图标：&nbsp 空格，&gt 大于号，&lt 小于号；
　　<p> 段落
　　<br> 换行
　　<h1> 标题
　　================
　　所有的标签分为：
　　块级标签：div（白板），h系列（加大加粗），p标签（段落和段落之间有间距），
　　行内标签（内联标签）：span标签（白板），
　　标签之间可以嵌套
　　标签存在的意义，css操作，js操作；
　　ps:Chrome审查元素的使用

四、body内标签之lnput系列

- input系列 + form标签；
input type="text" 文本，name属性
input type="password" 密码，name属性
input type="submit" 提交表单按钮，value属性
input type="buttom" 按钮，value属性

input type="radio" name="gender" value="1" 单选（name相同互斥）
input type="checkbox" name="favor" value="1" 复选框（name批量获取数据）
默认被选中：checked="checked"
input tpye="file" 上传文件；依赖form表单的属性 enctype="multipart/form-data"；
input tpye="reset" 重置
- textarea标签，多行文本
- <select name='city'> <option value='1'></option>，下拉框，
multiple="multiple" 多选框；size=10,显示多个；

- form标签，action="";methed="GET" or "POST"

五、超链接　　

　　- a标签，href，target属性,功能：跳转，
　　锚 href="#i3" <div id="i3"> 标签id不能重复；

六、图片及表格

- img标签 src属性，title,alt属性显示关键字；
- 列表；<ul><li>，<ol><li> <dl><dt><dd>
- 表格：
<table> 表
<thead>
<tr>
<th>
<tbody>
<tr> 行
<td> 列
合并单元格：
<td colspan="2"> 列合并；
<td rowspan="2"> 行合并；

七、fieldset标签和label标签

- label标签 for="idname" ,结合input使用；
<label for="username">用户名：<label>
<input id="username" tpye="text">
- fieldset 标签；legend
- div
- span

八、标签总结

　　- 20个标签

九、CSS选择器

1.在标签上设置style属性；
background-color:#2342345;
height:48px;
...
2.编写样式：
1.标签的style属性中可以写；
2.写在head标签style标签中；
- id选择器
#i1{
background-color:#2342345;
height:48px;
}
id="i1"
- class选择器（最常用的）
.c1 {}
class="c1"
- 注释 /* 注释内容 */
- 标签选择器
div {
height:48px;
}
所有的div标签设置此样式；
- 关联选择器（层级选择器）
.c1 div {
height:48px;
}
.c1类下面的div标签设置此样式；
- 组合选择器
.i1,.i2,.i3{
height:48px;
}
- 属性选择器
input[type="text"]{
height:48px;
}
对选择到的标签再通过属性筛选；

3.优先级，标签上的style优先，其他css按照编写顺序，就近原则；
4.引入css文件；<link ref="stylesheet" href="am.css" />
5.边框
border:1px solid red,宽度，样式，颜色
border-left border-top
6.height:48px; 高度
width:80%; 宽度
font-size:18px; 字体大小
text-aling:center; 水平居中
line-height:48px; 垂直居中
font-weight:bold； 字体加粗

十、CSS之float样式

　　7.float 
　　float:left;让标签飘起来；块级标签也可以堆叠；
　　<div style="clear:both;">

十一、CSS之display样式

8.display:inline
display:block
display:inline-block
display:none 让标签消失；
行内标签无法设置高度宽度边距,块级标签可以设置；

十二、CSS之内外边距

　　9. padding 内边距,自身发生变化
　　margin(0,auto)外边距

实战练习：跑马灯

<html>
<body>
<div id="i1">欢迎领导莅临指导</div>

<script>
function func1(){
t=document.getElementById("i1")
t.in
}
setInterval()
</script>
</body>
</html>

第十三篇：HTML和CSS入门的更多相关文章

  1. Egret入门学习日记 --- 第十三篇（书中 5.2~5.3节 内容）

    第十三篇(书中 5.2~5.3节 内容) 写日记已经十天多了,我发现越到后面,我书写的方式越来越程序化. 感觉渐渐失去了人类所谓的感情似的. 不过,没想到的是,书中的内容,很少出现了错误,我一路过来到 ...

  2. 第五篇 CSS入门 明白 三种嵌套形式，三种常用控制器

    CSS入门 css是 层叠式样式表   css的作用是什么呢?举个抽象的例子啊,HTML是人,CSS则是衣服...   css给html穿上衣服,有三种形式: 内嵌.内联.外联. 这三种形式,优先级为 ...

  3. Python开发【第十三篇】：jQuery（二）

    http://www.bubuko.com/infodetail-1438296.html 处理完毕需要整理贴进来 Python之路[第十三篇]jQuery案例-Form表单&插件及扩展   ...

  4. H5教程（二），CSS入门（一）选择器

    这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1.  CSS简介 1.1  CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...

  5. HTML和CSS 入门系列（一）：超链接、选择器、颜色、盒模式、DIV布局、图片

    一.超链接 二.CSS选择器 CSS的全称叫做: Cascading Style Sheets 级联样式表的缩写. 2.1 类型选择器 2.2 派生选择器 2.3 伪类选择器 <style &g ...

  6. HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

    上一篇:HTML和CSS 入门系列(一):超链接.选择器.颜色.盒模式.DIV布局.图片 一.文字 1.1 属性 1.2 字体样式:font-family 1.3 字体大小:font-size 1.4 ...

  7. CSS入门指南-4：页面布局

    这是<CSS设计指南>的读书笔记,用于加深学习效果. display 属性 display是 CSS 中最重要的用于控制布局的属性.每个元素都有一个默认的 display 值.对于大多数元 ...

  8. 解剖SQLSERVER 第十三篇 Integers在行压缩和页压缩里的存储格式揭秘（译）

    解剖SQLSERVER 第十三篇    Integers在行压缩和页压缩里的存储格式揭秘(译) http://improve.dk/the-anatomy-of-row-amp-page-compre ...

  9. 第十三篇 Integration Services：SSIS变量

    本篇文章是Integration Services系列的第十三篇,详细内容请参考原文. 简介在前一篇我们结合了之前所学的冒泡.日志记录.父子模式创建一个自定义的SSIS包日志记录模式.在这一篇,我们将 ...

  10. Python之路【第十三篇】：jQuery -暂无内容-待更新

    Python之路[第十三篇]:jQuery -暂无内容-待更新

随机推荐

  1. 基于 BDD 理论的 Nebula 集成测试框架重构（下篇）

    本文首发于 Nebula Graph 公众号 NebulaGraphCommunity,Follow 看大厂图数据库技术实践. 在上篇文章中,我们介绍了 Nebula Graph 的集成测试的演进过程 ...

  2. C++11的类型转换

    //C类型转换 /* C语言:显式和隐式类型转换 隐式类型转化:编译器在编译阶段自动进行,能转就转,不能转就编译失败 显式类型转化:需要用户自己处理. 隐式类型:界定:相关类型,相近类型,意义相似的类 ...

  3. Win10系统winload.efi丢失或损坏怎么办？修复步骤（以联想笔记本为例）

    winload.efi是通过UEFI方式引导必要的引导文件,如果系统中丢失或是损坏将导致系统无法启动,如win10在出现这样的问题时会出现蓝屏恢复界面,那么此时该如何解决呢?此例为 GPT+UEFI ...

  4. Python列表转换成字典、嵌套列表转字典、多个列表转为字典嵌套列表

    目录 两列表转为字典 多列表转为字典嵌套列表 嵌套列表转字典 方法一:直接内置dict 方法二: for循环 一个列表转字典 两列表转为字典 list1=["key1"," ...

  5. Codeforces Round 787 (Div. 3)D. Vertical Paths

    题目链接 题意:给定一棵树,将这棵树划分成几天互不相交的链,要求最小化链的数量 思路:每个叶子节点一定在一条链中,所以链的数量就是叶子节点的数量,从叶子节点往上跳直到根节点,边跳边标记,路径上所有点都 ...

  6. centos7 开机自动执行脚本

    1.因为在centos7中/etc/rc.d/rc.local的权限被降低了,所以需要赋予其可执行权 chmod +x /etc/rc.d/rc.local 2.赋予脚本可执行权限假设/usr/loc ...

  7. Zabbix与乐维监控对比分析（四）——告警管理篇

    在前面发布的Zabbix与乐维监控对比分析文章中,我们评析了二者在架构与性能.Agent管理.自动发现.权限管理.对象管理等方面的差异.接下来让我们一起看看二者在告警管理方面的差异. 告警管理是所有I ...

  8. trans.bat 将.m4a 文件拖拽到这个上面 自动转换成.mp3 老歌精选-歌曲z

    @chcp 65001 >nul echo off :: 获取文件名 SET filePath=%1 :: 因为这里目录的路径是 E:\老歌精选-歌曲z 是11个字符,所以是从第12个字符到最后 ...

  9. Android CheckBox控件去除图标 样式改造

    有个UI需要实现下面这种效果,但我之前是使用的CheckBox,本着能改就改的原则,还是把CheckBox改造一份,终于是实现了图中的效果 过程 1.去除CheckBox的左侧图标 CheckBox默 ...

  10. Java双重循环实现任意字符串中提取数字子串

    public class Test2{  public static void main(String[] args) {   String s = "211ahn678rh2kkk0731 ...