html_css

Myth丶恋晨 2022-06-18 05:16 159阅读 0赞

web浏览器

主要功能

代理访问者提交请求   作为HTML 解释器和内嵌脚本程序执行器 用图形化的方式显示html

主要浏览器  ie firefox  chrome  safari

标记

html用于描述功能的符号称为 标记 （标签标记元素都是一样的）  标记在使用时必须 使用尖括号 括起来

有封闭类型标记，也有 非封闭类型标记

<!DOCTYPE HTML>

<html lang="zh-cn">   记事本里面这样写

<head>

</head>

<body>

<h1>h标记是闭合型标记，它是标题标记，h1--h6，默认加粗</h1>

<p>p标记是闭合型标记，它是段落标记</p>

</body>

</html>

<br/>换行  也可以写成<br>   元素  每对尖括号所包围的部分如body

属性的声明  必须位于开始标记里   一个标记的属性可能不止一个，多个属性之间用空格隔开

多个属性之间不区分先后顺序

<body>

<p align="center"></p>               align对齐方式属性  center属性值   aling文本通用属性

</body>

通用属性

每个元素都有自己的所特有的属性   有些属性绝大多数元素都支持的属性

id  title  class style      id 和class都是给标记命名的  id是唯一的  class允许名字重复

注释的语法    内容不会在浏览器中显示

meta  定义网页基本信息的  常用属性有content  http-equiv

文本是网页的  重要组成部分     直接书写的文本会用浏览器默认的样式显示

包含 在标记中的文本  刚会被显示为标记所拥有的样式

特殊字符   注释  标题元素  段落元素  换行元素  分区元素

html中不能直接用＜＞符号　　用字符实体　　＆ｎｂｓｐ；空格　　＆ａｍｐ；表示＆

![Image 1][]

ｂ元素加粗　　　＜ｂ＞加粗＜／ｂ＞＜ｓｔｒｏｎｇ＞加粗＜/ｓｔｒｏｎｇ＞不换行的是内联元素

换行的 叫  块元素

分区元素<span><div>

分区元素用于 为元素分组，常用页面布局  块分区div  行内分区span不换行内联元素

块元素会换行

url统一资源定位器，用来表示网络中的任何资源   文本  图片  音视频  段落  或其他文本

完整 url的组成

协议  机名   路径名   文件名

http://www.w3.org/tr/css2/syndata.html

http:协议名      www.w3.org  主机名  服务器   /tr/css2/路径   syndata.html要链接的文件名

相对路径   指文件的路径相对于当前文件的位置

绝对路径   文件从最高级目录下开始的完整路可径

超链接a元素1.外部链接a href="www.baidu.com"target="\_black"

black在另一个页面打开  self在当前页面打开

内部链接

<!DOCTYPE HTL>

<head>

</head>

<body>

<h3>子集文件链接<a href="img/小小.png">小小的图片</a><h3>

</body>

/html>

锚点是文档中的某行中的一个记号  用于链接到文档中的某个位置

定义锚点

<a  id=”anchroname1”>锚点一</a>    链接到锚点：在锚点名前加上\#

<a  href=”\#anchroname1”>回到锚点一</a>

列表的作用

列表是指将具有相似特征或者  具有先后顺序的几行文字进行对齐排列   所朋的列表都 由列表类型和列表项组成   列表类型  有序列表<ol>  和无序列表<ul>  列表项<li>用于指示具体的列表内容

无序列表type属性值  1.disc 默认实心圆  2. circle空心圆  3.square实心方块

有序列表type 属性  1默认整数 2大小写字母 3大小写罗马数字

start属性  从哪个序号开始 start=”12”;

Value属性 重新开始项

<!DOCTYPE HTML>

<head>

</head>

<body>

</ul>

</ol>

</body>

</html>

表格的作用

表格通常用来 组织结构化的信息

表格是一些被称作单元格的矩形按照从左到右，从上到下的顺序排列在一起而形成的

表格的数据保存在单元格里

显示表格数据   设置页面布局

创建表格

定义表格  使用table标记  表行<tr></tr>  单元格<td></td>

Border   width/height   align

Cellpadding 单元格边框与内容之间的间距  cellspacing单元格之间的间距

<tr>元素

Align(left,center,right)左中右     valign(top,middle,bottom上中下

<td>元素

Align  valign width height colspan横向单元格合并 rowspan 纵向单元格合并

表格标题<caption>

使用caption元素为表格定义标题

默认情况下，标题将在表格上方居中显示

caption标签必须紧随table标签之后，且只能对每个表格定义一个标题

表单

表单用于显示，收集信息  并提交信息到服务器     表单有两个基本部分

1实现数据交互的可见的界面元素，比如文本框或按钮   提交后的表单处理

界面元素

使用<form>元素创建表单

在from元素中添加其他表单可以包含的控件元素

定义表单 使用成对的from

主要属性

Action  定义表单被提交时发生的动作

通常包含服务方面脚本的url

method指出表单数据提交的方式，取值为get （主动提交）或post

enctype表单数据进行编码的方式

Name  表单名称

表单控件

表单可以包含很多不同的类型的表单控件

表单控件元素时包含在表单元素中具有可视化

外观的html元素，用于访问者输入信息

表单控件 元素有

input元素  文本输入控件  按钮  单选和复选

按钮  选项框  文件选择框和隐藏控件等

textarea元素

Select

Input 元素用于收集用户信息   单标记元素

主要属性   type   文本框      value控件的数据（默认值）

name控件的名称（让服务器读取信息）

文本框

<input type=”text”>   密码框 type=”password”

主要属性

Value  由访问堵自由输入的任何文本

Maxlength   限制输入的字符数

readonly设置文本控件只读

单选框  radio    复选框 checkbox

主要属性

Value 文本  当提交form时如果 选中了此单选按钮，那么value就被发送到服务器

name用于实现分组，一组单选框或者复选框的名称必须相同

Checked 设置选中      性别  男   女

提交  按钮submit  传送表单数据给服务器端

重置按钮   <input type=reset>   清空表单的内容并把所有表单的设置为初始默认值

普能按钮  button  用于执行 客户端脚本

隐藏域<input type=”hidden”>

在表单中包含不希望用户看见的信息

文件选择框<input type=”file”>

选择要上传的文件

Placeholder=”请输入关键字”

Label

语法  <label>文本<label>

主要属性  for 表示与该元素相联系的控件的id值

作用

将文本与控件连接在一起

选项框

两种：下拉选项框和滚动列表

<select>创建选项框

Name 选项框命名

size大于1，刚为滚动列表

Multiple  设置多选

<option>选项  value 选项值   selected  预选中

选择课程

多行文本输入框

主要属性

Cols 指定文本区域的列数  rows行　　　　readonly只读

Fieldset  为控件分组

Legend

Input   时间  time   日期 date   周 week  月  month   <input type=”datetime-local”>

本地时间  datetime-local   UTC时间  datetime  颜色选择color

<!DOCTYPE HTML>

<html>

<head>

<title>form表单</title>

</head>

<body>

</fieldset>

</form>

<input type="radio" name="radio">男士

<input type="checkbox" name="checkbox" checked>ps

<input type="checkbox" name="checkbox">cdr

</form><br><br>

<form>

</select>

</form><br><br>

<form>

<textarea cols="10" rows="5">jkljl</textarea>

</form>

</body>

</html>

![Image 1][]

课堂练习代码

<!DOCTYPE HTML>

<html>

<head>

<title>无标题文档</title>

</head>

<form >

账        号:<input type="text " name="text" placeholder="账号"  style="width:200px;height:16px;"><br>

密        码:<input type="password"  name="password" placeholder="密码" style="width:200px;height:16px;"><br>

电话号码:<input type="text" name="text" placeholder="电话号码" style="width:200px;height:16px;"><br>

电子邮箱:<input type="email" name="email" placeholder="电子邮箱" style="width:200px;height:16px;"><br>

</fieldset>

</form>

<body>

</body>

</html>

\--------------------------------------------------------------css-------------------------------------

使用css的作用

各元素使用统一的样式声明

且提高了样式的可重用性和可维护性

css样式表

内联方式   样式定义在html元素中

内部样式  样式定义在 html页的头中

外部样式  样式定义在一个外部的css文件中.css文件

外部css的写法

body\{ background-color:\#ccc; color:\#0033ff;\}

font\{ color:red;\}

h3\{ color:\#0C3;\}

样式表特征

大多数 css的样式规则可以被继承

层叠性

可以定义多个样式表

不冲突时，多个样式表中的样式可层叠为一个

优先级

样式定义冲突时，按照不同样式规则的优先级来定义样式    谁近谁优先

样式优先级

浏览器缺省设置

外部样式表或者内部样式表   就近优先

内联样式

相同的样式如果重复定义，以最后一次的定义为准

元素选择器

html文档的元素就是选择器   如  <p>

类选择器

可以将选择器和元素选择器结合起来使用，以实现对不同元素的细分控制

<title>CSS基础</title>

.orange\{color:orange;\}

p.orange\{background:\#F6C\}

</style>

</head>

<body>

<h3 class="orange">h3继承父级颜色</h3>

<h3>h3继承父级颜色</h3>

文字文字文字

</body>

</html>

Id选择器

伪类选择器   用于向某些选择器添加的效果

使用冒号  作为结合符

常用伪类

Link 未访问的链接active选定的链接  visited 已访问的链接 hover鼠标移动到链接上  focus  访问焦点（有先后顺序）

样式单位

%百分比  in英寸  cm  mm   pt磅 (换算一下)  px像素  em:1em相当于当前字体的大小  2em当前字体的２倍

\#rrggbb十六进制  可省 \#rgb     rgb(x,x,x)颜色

透明度h5中rgba(255,115,5,0.5)  0.5表示透明度  rgb(x%,x%,x%)  \#rgb  颜色的三种写法

尺寸  width height

Overflow  当内容溢出元素框时如何处理   visible  hidden 隐藏 scroll滚动  auto自动

单边定义

Border-left/right/top/bottom:width style color;

<!DOCTYPE HTML>

<html>

<head>

<title>CSS基础</title>

.orange\{color:orange;\}

p.orange\{background:\#F6C;\}

\#bg\{background:\#0FF;\}

h3,p\{border:1px solid \#000;\}/\*solid 实线边框   \#000颜色\*/

body div p\{ background:\#309; color:\#fff;\}/\*派生选择器\*/

a:link\{ color:\#FF0;\}

a:active\{ color:\#6c9;background:\#f69\}

a:visited\{ color:\#333;\}

a:hover\{ color:\#fff;background:\#090\}

\#box\{ background:\#ffc; border:10px solid \#000; width:200px;height:200px; overflow:hidden; overflow:scroll;overflow:auto  padding:20px; margin:20px;\}

\#box p\{ background:none; border:none; color:\#000\}

ul\{ width:300px border-color:\#0f0; border-style:solid; border-width:5px; boder:5px solid \#0f0; border-top:5px solid \#F00; border-right:10px dotted \#00F;\}

</style>

</head>

<body>

<h3 class="orange">h3继承父级颜色</h3>

<h3 class="orange" id="bg">h3继承父级颜色</h3>

<h3>h3继承父级颜色</h3>

<div>

</div>

<a href="http://www.baidu.com/">伪类选择器</a>

文字文字文字

<p>日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日</p>

<ul>