一,HTML
1,什么是html
html是一种超文本标记语言
超文本:指页面内可以包含图片,链接,甚至音乐,程序等非文字元素;
标记:一种标记符,可以浏览器如何显示其中的内容;
2,静态网页和动态网页定义
静态网页:html代码和内容书写完毕后,页面的内容和显示效果就基本上不会发生变化,除非修改页面代码
动态网页:不更改页面代码,但显示内容可以随时间,环境,或数据库操作而发生改变.动态网页一般需要后台程序支撑.
3 HTML基础---->注释
3.1
pycharm注释快捷键： shift+ctrl+/
#注释不能嵌套
3.2 html规范
html 标签通常是成对出现,可以嵌套,但不允许交叉嵌套
html不区别大小写
4,html中常用标签
4.1基本标签
<i> 斜体<i>
<b>加粗</b>
<u>下划线</u>
<br>换行
<p>
段落(换行,默认情况下和上下的内容之间有间距)
</p>
<hr>水平线<hr>
<h(n)>标题(h1-h6 从大到小的 换行 加粗，上下内容)</h(n)>
<font 属性名=值>字体标签</font>
例:<font size="30">大小</font>
<span>行内标签</span>
<pre>预格式文本</pre>
<div>
块标签
</div>
4.2重要标签
<a href="链接的目标url">超链接</a>
<img src="图片路径" width=宽度,title='图片名称',alt='图片的错误信息'> 图片
<ul>
无序列表,可以嵌套
<li>列表里的每个成员</li>
</ul>
<ol>
有序列表
</ol>
<dl>
dl:标记定义了一个定义列表
dt:用来创建列表中的上层项目
dd:用来创建列表中最下层项目
<dt>和<dd>都必须放在<dl>< /dl>标志对之间
</dl>
<table> 表标签
<tr>行
<th>表头使用</th>
<td>列</td>
</tr>
</table>
4.3表单标签
<form>
表单标签
</form>
form里的属性包括:*action=""代表的是这个表单要提交的地址
:method:method：提交到后台的方法,一般有get,post
<input> 输入框,用于搜集用户信息,input属性有type,name,value,和其它属性
type 属性: <input type="text">,type 包括:text 普通文本框, password 密码框,submit 点击按钮,button 普通按钮 reset 重置按钮 radio 单选,checkbox 多选,file 附件,hidden 隐藏域 image 图片按钮
name 属性:表示控件的名称，只名称的控件数据才会提交到后台
凡是要提交到后台的控件，都要加上name
用于单选与多选的分组，同一组的元素name需要一致
value属性:有不同的类型(type)中，value的意义是不同的
text/password 如果我们提交写上,它就是默认值(也是我们要提交的值)，提交value的值
submit/button/reset 表示显示在按钮中的文字
radio/checkbox 是一个元素所代表的值
其它属性:
maxlength:一个文本框最多输入多少字符
readonly:只读(不可输入)
disabled：禁用(不可输入) -> 不会提交这个表单元素的数据
checked:仅用于 radio/checkbox作用是默认帮我们进行选择
<select>下拉框,<seclet>和<option>一般同时使用,select代表的下拉，option表示它的每一项
</select>
代码示例：
<select name="country" >
<option value="">---请选择---</option>
<option value="zh" selected="selected">中国</option>
<option value="en">英国---</option>
</select>
select 中的属性：
name：表单提交的参数名
option中的属性：
当option中有value的时候，传将value传到后台
没有value的时候，将它显示的内容传到后台
textarea标签多行文本域
语法: <textarea cols="50" rows="5">
要显示的内容
</textarea>
二 css介绍
1网页设计者使用CSS可以定义元素的样式，包括字体、背景等HTML无法表现的高级样式
2,一个CSS样式表由一个或多个声明（属性名:属性值）组成；
每一条格式声明语句由“属性名:属性值;”对组成，属性名和属性值间以冒号隔开，每条声明语句以分号“;”结束。
如:<span style="color:red; font-weight: bold; font-size: 120px;">明天会更好</span>
3,引入CSS的三种方式
1)行内,内联:是在对象的标记内使用对象的style属性定义适用其的样式表属性。如:<p style="font-size:50px; ">明天会更好<p>
2)内部css:可以在HTML文档的<HEAD>和<BODY>标记中插入一个<STYLE>...</STYLE>标签。这个样式只能作用到当前页面
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>这里是标题</title>
<style type="text/css">
h1{
font-size:50px;
background: red;
}
</style>
</head>
<body>
<h1>明天会更好</h1>
</body>
</html>
3)外部css:可以先建立外部样式表文件（abc.css），然后使用HTML的link标签将其引入到网页中。
步骤：
1）新建一个CSS文件
2）在CSS文件里直接写样式表
3）使用link标签将它们链接起来
<link rel="stylesheet" href="hello.css" />
案例:
CSS文件（index.css）：
p{ font-size:50px; background:red; }
HTML文件（index.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<p>明天会更好</p>
</body>
</html>
3 选择器
3.1定义：一个页面有很多的标签，我们需要从很多的标签中选择我们要应用样式的目标标签，这就是选择器。
3.2选择器语法：
选择器{ 样式1; 样式2；样式3；... }
1)标签选择器语法：
标签{ 样式表 }
2)类选择器语法：
.类的值{ 样式表 }
3)ID选择器
所有的HTML标签都有一个id属性，我们可以为这个id设定一个值，然后再写选择器来匹配这一个值
#ID值{ 样式表 }
d使用的 # ，class 使用的是 .
通常id是唯一的（只能够有一个元素来匹配）
4)其它选择器
A,包含选择器E1 E2
作用：选择所有被E1包含的E2。
语法：
E1 E2
示例：
table td { font-size:14px; }
div.sub a { font-size:14px; }
B,子选择器 E1 > E2
<div>
<span>
<i></i>
</span>
</div>
作用：选择所有作为E1子对象的E2。
语法：
E1 > E2
示例：
body > p { font-size:14px; }
注意：
子选择器与包含选择器有区别，子选择器只选下一代，包含选择器可选中所有后代（不限层级）。
C选择器分组 E1,E2,E3
作用：将同样的样式应用于多个选择符，可以将选择符以逗号分隔的方式并为组。
语法：
E1,E2,E3
示例：
.td1,div a,body { font-size:14px; }
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
