HTML与css语法笔记

HTML:Hyper Text Markup Language
超级文本标记语言
web
C/S：Client Server
客户端服务器
QQ,...
B/S：Browser Server
浏览器服务器
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<b></b>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<hr/>
<br/>
<img src="路径"/>
<div> 布局 </div>
<p> </p>
<sup></sup>上标
<sub></sub>下标
<u></u> 下划线
<span style="color:red;"> XXX </span>
<a href="https://www.baidu.com">链接</a>
<是 < >是 >
&nbsp 空格键
&copy 圈c
<pre> 保留源文档的格式 </pre>
</body>
</html>
Bgcolor :背景颜色 Background :背景图片
cellpadding内边距
cellspacing外边距
colsppan 合并列
rowspan 合并行

style 定义行内样式
id:定义元素在页面中的唯一标识
title:鼠标移入到当前元素时，所提示的文本
class:引用的样式的类名称
属性：align
块级元素中可以嵌套所有的行内元素
p标记是不允许嵌套其他块级元素
div：允许嵌套所有的元素
div没有特殊情况是不允许被其他元素嵌套的
div 能嵌套div
td 能嵌套div
li 能嵌套div
dt,dd 能嵌套div
<ol> 有序排列
<li></li>
</ol>
无序排列
<ul>
<li></li>
<li></li>
</ul>

<fieldset>
<legend>xxxxx</ledeng>
</fieldset> 边框

<a href="#名字"></a>
<a name="名字"></a>
<a href="#">链接到顶端</a>

<table>
<caption>设置表格的正中间</caption>



<thead>表头</thead>
<tbody>表主体</tbody>
<tfoot>表尾</tfoot>
<ol type="取值" start="从哪值开始">有序列表</ol>
<ul type="取值" 取值=disc（实心圆）circle（空心圆）
square=（方块）none=（无）>无序列表</ul>
<input type="button" value="按钮" οnclick="alert(提示窗口)"/>
<button οnclick="alert('点我啊')">点我</button>
点击按钮点我会弹出提示窗口（点我啊）

<section>元素
<section></section>=<div id="main"></div>用于定义文档中的节
特点：可以充当网页主体中的某一木模块
<aside>元素可以表示主体内容的边栏部分
<aside id="left">左侧</aside>=<div id="left_side"></div>
<aside id="right">右侧</aside>=<div id="right_side"></div>

<article>元素
<article></article>=<div id="article"></div>
<article>文档的主体内容(用于描述文字性较强的内容)</article>
<header>定义网页的头部网站标题 logo</header>=<div id="header"></div>
header 可以在网页多次出现可以表示任何一部分内容的头部信息
<nav>元素
<nav></nav>=<div id="navigation"></div>
<div id="nav"></div>
负责定义页面的导航链接部分
<nav>
<ul>
<li></li>
</ul>
</nav>
<footer>元素
<footer></footer>=<div id="foot"></div>
出现在网页偏下段部分用来定义网页文档的页脚部分内容

表单：
作用：用于显示收集信息，并将信息提交到服务器
<form></form>
特点:没有任何显示效果，默默的帮助网页完成信息提交的功能
1. action
<form action="test.java"></form>
<form action="#"></form> 默认值：本页

method
get 会将提交的信息全部显示大小限制为2kb
post ：隐式提交没有大小限制（头像文档密码等）
name 定义表单名称
ID 定义表的唯一标识

enctype 表单数据编码方式
1.application/x-www-form-urlencoded能够提交普通数据和特殊符号无法提交文件
2.multipart/form-data 将内容转换为二进制进行提交支持文件上传
3.text/plain 只负责提交基本数据
表单控件
disabled 禁用控件
<input id="vaule" disabled>
maxlength 限制输入的字符数
readonly 只读
name和id的命名规范
text---txt radio---rdoGender
password---txt checkbox---chk,chkHobby

<input type="button" vaule="文字"> 由用户来定义功能

1. 隐藏域
<input type="hidden"/> 提交给服务器且用户看不到
<input type="file" name=""/> 允许用户选择要上传的文件

<label>元素
<label>文本</label> 属性：for 表示与该lable相关联的控件的id值
选项框
<select></select> 属性 name: id: size：默认为1 大于1则为滚动列表
multiple ：多选

<textarea></texatrea>多行文本框属性：name cols:指定文本区域的列数<宽度>
rows:指定文本区域的行数<高度>

1<mark>2</mark> 2黄色标记

<div style="color:red;background-color:green;"></div>
选择器：规范了页面中哪些元素能够使用定义好的样式
选择器{
/*注释*/

属性:值;
属性:值;
}
在页面对样式表文件进行引入
<head>
<link rel="stylesheet" type="text/css" href="样式表文件路径" />
</head>
!important规则 :
调整样式规则的优先级
p{
color:red !important;
}
选择器：1.通用选择器
作用：匹配页面上的任何一个元素
语法：*{}
*{
font-size:12px;
/*...*/
}
2.元素选择器
body{

}
div{

}
h1{}
3.类选择器
使用: <div class="类名"></div>
注意：类名不能以数字开头
.div123{}
<div class="div123"></div>
4.id选择器
为标有特定id的html元素指定样式
语法：#id值{}
#header{
background-color:red;
}
<div id="header"></div>
5.群组选择器用逗号隔开
6.后代选择器 #d1 #d4
7.子代选择器 #d1>.d4

8.伪类选择器
1.链接伪类
：link 匹配尚未访问的链接
a:link {
color:red;
}

：visited匹配访问过的链接
2.动态伪类
：hover 匹配鼠标悬停在HTML元素的动态

:active匹配元素被激活时的状态

：focus 匹配元素获取焦点是的状态（多数使用在文本框上）
input：focus｛ color：red;｝

溢出处理
overflow
<style> 实线
bordr:1px solid red；
width：100px height:100px
ocerflow:visible
</style>
visible: 溢出可见 hidden 溢出隐藏 scroll 出现滚动条
auto 自动调试
能够改变尺寸的元素
1.块级元素
p div hn ul ol dd dt dl
边框
solid 实线 dotted 虚线 dashed 虚线
<style>
div{ border:10px soild red; width:300px; height:300px;
border-top:10px soild transparent 隐藏边框上框
</style>

转载于:https://www.cnblogs.com/xuaima/p/10407225.html

HTML与css语法笔记相关推荐

CSS学习笔记--CSS语法与选择器
导语 Css用于控制网页的样式和布局,指层叠样式表(Cascading Style Sheets),定义如何显示HTML的元素,这个样式通常存储在样式表中.在工作中通常使用的外部样式表,外部样式表 ...
CSS语法大全，学习笔记
序号名称说明/代码备注 1. CSS 中英文名层叠样式表 Cascading Style Sheet 2. CSS 文件拓展名 .css 3. CSS 注释 /*注释内容*/ 4. 4 种样式 ...
html css整理笔记,HTML CSS整理笔记 (八) 定位网页元素
----8 定位网页元素---- 51.Position属性:指定盒子的位置,相对它父级的位置或它自身应该在的位置. (1)static 默认无定位,元素按照标准文档布局. (2)relative相对 ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
张鹏 html 笔记,传智张鹏 html+css 课程笔记2(吐血整理)
Html+Css(张鹏)听课笔记2 1.Web标准的构成 2.css语法结构选择符(即要控制的对象,body里的标签){ 属性1:值; 属性2:值; ...... } 3.css 2.0手册 4.c ...
HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
HTML+CSS个人笔记
HTML+CSS个人笔记 HTML(Hyper Text Markup Language) 浏览器什么是浏览器内核? 浏览器所采用的渲染引擎("Rendering Engine" ...
CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image 边框border 样式宽度颜色圆角边框图片border- ...
CSS基础笔记（多看多记冲冲冲）
加油加油加油,天天做笔记! 入门跟着黑马的pink老师在b站的视频走的. 这是他的b站链接. https://www.bilibili.com/video/BV14J4114768?p=1 文章目录 ...

HTML与css语法笔记

HTML与css语法笔记相关推荐

最新文章

热门文章