HTML:Hyper Text Markup Language--超文本标记语言
标记语言:指的是通过一组标签描述事物的一门语言
超文本:比普通文本更强大
HTML作用
html用来制作页面(静态页面)
HTML在哪些地方使用
在设计网站的页面的时候
HTML的文件创建
一个HTML文件,扩展名,html或者htm结尾
01.html
C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7VjmWQYniWIMLxajLby2efwEg/a5030615fc3447ffbe8032c1fabca223/f591d02cf1db43ee8c42a4b994e4ecb5.jpg
HTML的结构标签
跟标签<html></html>
font标签的基本使用
color属性:字体颜色
HTML的排版标签
标题标签: h 标签<h1>----<h6>
原生标签
<pre> 按实际文件复制过来,包括空格
HTML引入图片,图片标签
<img>
属性
src: 图片来源
width:图片宽度
height: 图片的高度
alt:如果图片找不到显示的内容
图片引入的路径
路径:相对路径.
如果引入图片和html文件在同一级路径
直接写文件名或者./文件名
<img src ="cs10006.jpg"
<img src ="./cs10006.jpg"
如果在上一级路径
<img src ="../cs10006.jpg"
网站列表
有序列表
<ol>
<li>
</li>
</ol>
无序
<ul>
</ul>
href:跳转路径
target:指定打开方式
_self:在自身页面打开
_blank:另外新起一个窗口
总结
无序列表的属性
type属性
disc .
sircle 0
square 方块
parent
有序列表
type属性
1
a
i
start 从哪开始(只针对数字)
表格标签
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
属性
Width:表格宽度
Height:表格高度
Border:边框
Align:表格水平位置
left
center
right
<td>的属性
colspan=”列数”
* rowspan=”行数”='
技术分析
HTML的表单标签
HTML的表单元素<form>
<input type="text"> 文本框
<input type="password"> 密码框
<input type=""radio> 单选按钮
<input type="checkbox"> 复选按钮
<input type="button"> 普通按钮,没有任何功能的按钮
<input type="submit">提交按钮
<input type ="file"> 文件上传的表单项
<input type=hidden"">:隐藏字段
<input type =image>=引入一个图片
<select> :下拉列表
<textarea>文本区
总结
HTML:
* HTML的概述：
* HTML：Hyper Text Markup Language.
* HTML就是由一组标签所组成的.
* HTML的字体标签:
* <font>标签:
* 属性：color,size,face
* HTML的排版标签:
* h标签：标题标签.
* p标签：段落标签.
* b标签：加粗标签.
* i标签：斜体标签.
* u标签：下划线标签.
* br标签：换行.
* hr标签：水平线.
* HTML的图片标签:
* img标签:
* 属性:
* src属性:图片的路径.
* 相对路径: ./ 代表当前目录 ../上一级目录
* width,height,alt.
* HTML的超链接标签:
* a标签:
* 属性：
* href:链接的路径.
* target:链接打开的方式. _self,_blank,_parent
* HTML的列表标签:
* 无序列表:<ul>
* 有序列表:<ol>
* HTML的表格标签：
* table标签:
* tr标签：表格的行.
* td标签：表格的列.
* HTML的表单标签：（*****）
* form标签：
* action属性：表单提交的路径
* method属性：表单的提交的方式.
* GET和POST：
* GET：地址栏上会显示提交的数据的信息,大小限制.
* POST：地址栏不会显示提交的数据的信息,没有大小限制.
* <input>
* type=”text”:文本框
* type=”password”:密码框.
* type=”radio”:单选按钮.
* type=”checkbox”:复选框.
* type=”file”:文件上传.
* type=”hidden”:隐藏字段.
* type=”submit”：提交按钮.
* type=”reset”:重置按钮.
* type=”button”:普通按钮.
* type=”image”:图片按钮.
* <select>:下拉列表.
* <textarea>:文本区
* HTML的框架标签:
* <frameset>
* <frame>
DIV是HTML的块标签
<div> 默认一个div独占一行
</div>
<span> 默认在同一行
</span>
HTML相当于网站的骨架,css对骨架进行美化!
任何网站都会使用CSS去美化页面
CSS的语法
css的基本语法通常包含两个部分,一个是选择器,一个生命
选择器(属性:属性值;属性:属性)
行内样式 直接在HTML的元素上使用style
页面内样式:在HTML的<head>标签中使用<style>使用CSS
外部样式:单独定一个.css文件,在HTML中引入该css文件
元素选择器
id选择器,会将ID为div1的找到,可以重复,而id一般是我们js经常用的属性
div{ }
.divClass{ }
元素选择器<类选择器<ID选择器
float属性的取值
left 元素元素向左浮动
right 元素向右浮动
none 默认值,元素不浮动,并会显示在其文本中出现的位置
inherit 规定应该从父元素继承float属性的值.
其他选择器
盒子
margin-外边距-用来设置该元素距离其他元素距离
1. CSS的概念：层叠样式表。用来修饰HTML的显示样式。
2. CSS的基本语法：选择器{属性1:”属性值”;属性2:”属性值”}
3. CSS的引入方式：
3.1：行内样式：在元素标签上使用style属性。
3.2：内部样式：在HTML的页面内部使用<style>标签控制
3.3：外部样式：定义一个CSS文件,通过link标签将CSS文件引入
4.CSS的选择器：
4.1基本选择器：
4.1.1：元素选择器：span{}
4.1.2：ID选择器：#d1{}
4.1.3：类选择器：.s1{}
4.2层次选择器：
4.2.1：层次选择器：ul li{}
4.3属性选择器：
4.3.1：属性选择器：input[type=”text”]
4.4伪类选择器：
4.4.1：超链接：a:link a:visited a:hover a:active
5.CSS的属性:
5.1字体：
Font-size:
Font-family:
5.2背景：
Background:设置背景/背景图片
Background-color：背景色
6.CSS的盒子模型：
外边距：margin
边框：border
内边距：padding
7.CSS的悬浮和定位：
float：
清除悬浮：
clear：
position：
收藏
淘帖
踩
