HTML+CSS

引言

制作一个网页必须要遵守web标准，web标注分为三个标准

  • HTML结构标准
  • CSS表现标准
  • DOM、JavaScript、jQuery行为标准

HTML：对网页元素进行整理布局

CSS：设置网页元素的版本、颜色、大小、外观控制网页的表现，可以实现表现与结构的分离，使网站的访问及维护更加容易。

JavaScript：为页面添加动态交互效果。

HTML

HTML格式

  1. <!DOCTYPE>表名文档格式，按照指定的文档格式进行解析。

  2. <html>跟标记

  3. <head>头部标记

  4. <body>主体标记

  5. 双标记<a></a>

  6. 单标记<a/>

  7. 标题标记<h1>~<h6>

  8. 段落标记<p></p>

  9. <font>标记

    属性名 含有
    face 设置字体
    size 设置文字大小
    color 设置文字颜色

  10. align设置属性对齐方式

    • left：左对齐（默认）
    • center：居中对齐
    • right：右对齐

  11. <meat />设置页面原信息

  12. <link>引言外部文件标记

    属性名 常用属性值 描述
    href URL 引入外部文档地址
    rel stylesheet 当前文档与外部文档的关系
    type text/css、text/javascript 引入CSS样式表、引入JavaScript脚本

  13. 文本格式化标记

    标记 显示效果
    <b>、<strong> 粗体
    <i>、<em> 斜体
    <s>、<del> 删除线
    <u>、<ins> 下划线

图片

  1. <img src="图像URL" />

    属性 属性值 描述
    src URL 图像的路径
    alt 文本 图像不能显示时的替代文本
    title 文本 鼠标悬停显示的内容
    width 像素 设置图像的宽度
    height 像素 设置图像的高度
    border 数字 设置图像的边框
    vspace 像素 设置垂直边距
    hspace 像素 设置水平边距
    align left 图像左对齐
    align right 图像右对齐
    align top 将图像的顶端和文本的第一行对齐，其它文字居于图片下方
    align middle 将图片的水平中线和文本的第一行对齐其他文字居于图片下方
    align bottom 将图片底部和文本第一行对齐，其他文字居于图像下方

  2. 图片格式

    GIF格式：支持动画，无损的图像格式，支持透明，支持256种颜色

    PNG格式：体积小支持alpha透明，支持256种颜色

    JPG格式：可以保存超过256种颜色的格式，JPG是一种有损压缩

  3. 特殊字符

    描述 字符代码
    英文空格符 &nbsp;
    中为空格符 &emsp;
    大于号 &lt;
    小于号 &gt;
    和号 &amp;
    人民币 &yen;
    版权 &cope;
    注册商标 &reg;
    摄氏度 &deg;
    正负号 &plusmn;
    乘号 &times;
    除号 &divide;
    平方2 &sup2;
    平方3 &sup3;

表格

<table>
    <tr>
        <th>表头</th>
        <th>表头</th>
    </tr>
    <tr>
        <td>内容</td>
        <td>内容</td>
    </tr>
</table>

列表

  1. 无序列表

    <ul>
    <li>无序列表</li>
</ul>
    type属性值 显示效果
    disc（默认值） 黑⚪
    circle 白⚪
    square 黑正方形

  2. 有序列表

    <ol>
    <li>无序列表</li>
</ol>
    属性 属性值 描述
    type 1（默认） 项目符号显示为数字1 2 3...
    type a或A 项目符号显示为英文数字a b c d或A B C D
    type i或I 项目符号显示为罗马数字i ii iii ... 或I II III
    start 数字 规定项目符号的起始站
    value 数字 规定项目符号的数字

  3. 定义列表

    <dl>
    <dt>名词1</dt>
    <dd>名词解释1</dd>
    <dt>名词2</dt>
    <dd>名词解释2</dd>
</dl>

  4. 列表的复合属性list-style:列表项目符号 列表项目符号位置 列表项目图像;

    通过list-style:none可以清除列表项目符号

表单

  1. 表单的组成

    • 表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的URL地址，以及数据提交到服务器的方法。
    • 提示信息：提示用户进行操作信息
    • 表单控件：包含了具体的表单功能

  2. 表单的常用属性

    <form action="url地址" method="提交方式" name="表单名称"></form>
//method的提交方式：get、post。
//get保密性差，数据量有限制、post保密性号，提交数据无限制

  3. 表单控件

    表单控件 描述
    <input /> 表单输入控件
    <textarea><textarea /> 多行文本框
    <select><select /> 下拉框

  4. input控件<input type="控件类型">

    属性 属性值 描述
    type text 单行文本输入框
    type password 密码输入框
    type radio 单选按钮
    type checkbox 复选按钮
    type button 普通按钮
    type submit 提交按钮
    type reset 重置按钮
    type image 图像形式的提交按钮
    type hidden 隐藏域
    type file 文件域
    属性 属性值 描述
    name 自定义 控件的名称
    value 自定义 控件中默认的文本值
    size 正整数 在页面中显示的宽度
    readonly readonly 该控件内容只读（不能编辑）
    disabled disabled 第一次加载页面时禁用该控件
    checked checked 定义选择控件默认被选中的项
    maxlength 正整数 控件允许输入的最多字符数

  5. textarea控件

    如果需要输入大量数据可以使用textarea控件（多行文本输入框）

    <textarea cols="每行中的字符数" rows="显示的行数">...</textarea>

  6. select控件

    标记名 常用属性 描述
    <select> size 指定下拉菜单的可见现选项数
    <select> multiple 定义multiple="multiple"时，下拉菜单将具有多项选择的功能，方法为按住Ctrl键的同时选择多项。
    <option> selected 定义selected="selected"时，当前项即为默认选中

超链接

  1. <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

    • href=""为要跳转的目标url地址
    • target=""为链接页面打开的方式，_self默认值原窗口打开，_blank新窗口中打开

  2. 清除超链接图像的边框：需要border="0"

    <a href="" target=""><img src="" border="0"/></a>

  3. 链接伪类

    超链接标记<a>的伪类 含有
    a:link 为访问时超链接的状态
    a:visited 访问后超链接的状态
    a:hover 鼠标经过、悬停时超链接的状态
    a:active 鼠标单击不动时超链接的状态

  4. 锚点链接：利用a标签实现条跳转

    <body>
    <ul>
        <li><a href="#one"></a></li>
    	<li><a href="#two"></a></li>	
    </ul>
    <h3 id="one"></h3>
    <h3 id="two"></h3>  
</body>

元素类型

  1. 块元素

    每个块元素通常都会独自占据一整行，或者多行，可以对齐设置宽度、高度、对齐等属性

    常见的块元素

    <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

  2. 行内元素

    不必在新的一行开始，也不强迫其他元素在新的一行显示，行内元素仅靠自身的字体大小和图像尺寸来支撑结构。

    常见的行内元素

    <strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>

  3. 元素转换display:

    • inline:此元素将显示为行内元素
    • block:此元素将显示为块元素
    • inline-block:此元素将显示为行内块元素，可以对其设置宽高和对齐属性，该元素不会独占一行。

CSS

CSS规则

  1. 行内式

    <p style="属性:属性值"></p>

  2. 内嵌式

    <head>
    <style type="text/css">
    </style>
</head>

  3. 链入式

    <link href="css">

基础选择器

  1. 标记选择器

    <style>
    p{...}
</style>

  2. 类选择器

    <style>
    .class{...}
</style>

  3. id选择器

    <style>
    #id{...}
</style>

  4. 通配符选择器

    <style>
    *{...}
</style>

CSS字体样式属性

  1. font-size：---字号大小

    相对长度单位 说明
    em 相对于当前对象内文本的字体尺寸
    px 像素
    绝对长度单位 说明
    in 英寸
    cm 厘米
    mm 毫米
    pt 点

  2. font-family：---字体

    • 微软雅黑、宋体、黑体、Arial等

  3. font-weight：---字体粗细

    值 描述
    normal 默认值。标准字符
    bold 粗体字符
    bolder 更粗字符
    lighter 更细字符
    100~900(100的整数倍) 又粗到细。400=normal、700=bold

  4. font-variant：---变体（仅对英文有效）

    值 描述
    normal 默认值
    small-caps 小型大写字体，所有小写字母均会转换为大写，但传唤后的字体与其他字体相比字体尺寸更小。

  5. font-style：---字体分格

    值 描述
    normal 默认值
    italic、oblique 斜体

  6. font：---综合设置字体样式

    必须按照该顺序书写

    选择器{font:font-style font-variant font-weight font-size/line-height font-family}

CSS文本外观属性

  1. color：---文本颜色

    值 描述
    red 颜色值
    #FF0000 十六进制值
    rgb(255,0,0) RGB代码

  2. letter-spacing：---字间距

    • 默认normal，可设置不单位的数值

  3. word-spacing：---单词间距

    • 默认normal，可设置不单位的数值

  4. line-height：---行间距

    • px、em、%

  5. text-transform：---文本转换

    值 描述
    none 不转换
    capitalize 首字母大写
    uppercase 全部字符传为大写
    lowercase 全部字符传为小写

  6. text-decoration：---文本装饰

    值 描述
    none 没有装饰
    underline 下划线
    overline 上划线
    line-through 删除线

  7. text-align：---水平对齐方式（只适用于行内块元素）

    值 描述
    left 左对齐
    right 右对齐
    center 居中对齐

  8. text-indent：首行缩进（只适用于行内块元素）

    • em、%

  9. white-apacet：空白符处理

    值 描述
    normal 常规值（默认值），文本种空格无效
    pre 预格式化，按文档的书写格式保留空格、空行原样显示
    nowrap 空格无效，强制空格不能换行除非<br>、内容超出元素边界也不换行

复合选择器

  1. 标签指定式选择器

    规则：第一个为标记选择器、第二个为class或者id选择器，不能有空格

    p.id{...}

  2. 后代选择器

    规则：前面为外层标记、中间空格符、后面为元素组

    p strong{...}

  3. 并集选择器

    规则：任何性质的选择器通过逗号连接

    h1,p,#class{}

  4. CSS层叠性与基础性

    • CSS层叠性：当行内式CSS样式定义<p>时、内嵌式CSS样式定义<p>时，就发生发生了CSS层叠性，在层叠性中：行内式 > 内嵌式 > 外联式

    • 基础性：子标记汇会继承父标记的某些样式，但和盒子模型有关的书写不会被继承

  5. 优先级

    • 多个规则应用在同一元素上时就会出现优先级

    标记选择器权重 1、Class选择器权重10、id选择器权重100

    继承的样式权重为0、行内式优先、权重相同时，CSS遵循就近原则

盒子模型

把HTML页面中的元素看出一个矩形的盒子每个矩形都由元素：外边距（margin）、边框（border）、内边距（padding）、内容（content）组成。

内边距属性

属性 描述
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
padding：[上，右，下，左] 内边距

外边距属性

属性 描述
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距
margin：[上，右，下，左] 外边距

边框属性

  • 上边框

    样式 描述
    border-top-style 样式
    border-top-width 宽度
    border-top-color 颜色
    border-top: 宽度、样式、颜色

  • 下边框

    样式 描述
    border-boottom-style 样式
    border-boottom-width 宽度
    border-boottom-color 颜色
    border-boottom: 宽度、样式、颜色

  • 左面框

    样式 描述
    border-left-style 样式
    border-left-width 宽度
    border-left-color 颜色
    border-left: 宽度、样式、颜色

  • 右边框

    样式 描述
    border-right-style 样式
    border-right-width 宽度
    border-right-color 颜色
    border-right: 宽度、样式、颜色

  • 样式综合设置

    样式 属性
    border-style:上、右、下、左 none无、solid单实线、dashed虚线、dotted点线、double双实线

  • 宽度综合设置

    样式 属性
    border-width:上、右、下、左 像素值

  • 颜色综合设置

    样式 属性
    border-color:上、右、下、左 颜色值、十六进制、RGB

  • 边框综合设置

    样式 属性
    border:四边宽度、四边样式、四边颜色

  • 综合设置时只设置一个值（四边）、两个值（上线/左右）、三个值（上/左右/下）。

背景设置

  1. 设置背景颜色backround-color:

  2. 设置背景图像backround-image:url()

  3. 设置背景图像平铺backround-repeat:;

    默认情况下，背景图像会自动向水平和竖直两个方向平铺。

    backround-repeat:repeat;沿水平和竖直两个方向平铺（默认值）

    backround-repeat:no-repeat;不平铺（图像位于元素的左上角，只显示一次）

    backround-repeat:rpeat-y;只沿水平方向平铺

    backround-repeat:rpeat-x;只沿竖直方向平铺

  4. 设置背景图像位置

    如果将背景图像定义为no-repeat，但是想让背景图像出现在其他位置，就需设置background-position属性

    使用像素

    background-position:20px 20px

    使用预定义的关键字

    • 水平方向：left、center、right
    • 垂直方向：top、center、botton

    使用百分比

    • 0% 0% ----- 图像右上角与元素右上角对齐
    • 50% 50% ----- 图像50% 50%的中心的与元素50% 50%的中心点对齐
    • 20% 30% ----- 图像20% 30% 的点与元素20% 30% 的点对齐
    • 100% 100% ----- 图像右下角与元素右下角对齐

  5. 设置背景图像固定

    • scroll:图像随页面元素一起滚动（默认）
    • fixed:图像固定在屏幕上，不随页面滚动

  6. 综合设置元素背景background:背景色 url("图像") 平铺 定位 固定;

浮动

浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到父元素中相对应的位置

  1. 浮动选择器{float:属性值}

    属性值 描述
    left 元素向左浮动
    right 元素向右浮动
    none 元素不浮动（默认值）

  2. 清除浮动

    • clear清除浮动选择器{clear:属性值}

      属性值 描述
      left 不允许左侧有浮动元素
      right 不允许右侧有浮动元素
      both 同时清除左右两侧浮动的影响

    • after伪对象清除浮动

      必须为需要清除浮动的元素伪对象设置height:0;样式，否则该元素会比其实际高度高出若干像素

      必须在伪对象中设置content属性，属性值可以为空，如content=""。

  3. overflow属性选择器{overflow:属性值;}

    当盒子内的元素超出盒子自身的大小时，内容就会溢出，如果想要规范溢出内容的显示方式，可以使用overflow属性

    属性值 描述
    visible 内容不会被修剪，会呈现在元素框之外（默认）
    hidden 溢出内容会被修剪，并且被修剪的内容不可见
    auto 在需要时产生滚动条即自适应所要显示的内容
    srcoll 溢出内容会被修剪，且浏览器会始终显示滚动条

定位

  1. 定位属性选择器{position:属性值;}

    值 描述
    static 自定定位（默认）
    relative 相对定位，相对于标准文档流定位
    absolute 绝对定位，相对于上一个已经定位的父元素进行定位
    fixed 固定定位，相对于浏览器窗口进行定位

  2. z-index层叠等级属性

    当多个元素同时设置定位时，定位元素之间可能会发生重叠，在CSS可以通过z-index属性调整重叠定位元素的堆叠顺序。值可以为0、负数、正整数。取值越大定位元素在层叠元素中越居上。

posted @ 2021-04-09 10:14  一程山水一年华^_^  阅读(271)  评论(0)    收藏  举报
TOP 底部 /*显示代码块行号*/