HTML

一.HTML5

1.HTML5概念及发展史

  1. HTML（Hyper Text Markerup Language）超文本标记语言，特点是通过“<>”的形式，将标签包围起来，可以设置对应属性，形成在页面中的结构部分。
  2. HTML从最早1993-6发布第一个版本，在1999-12-24年发布了HTML4.01版本，随着互联网及移动应用的快速发展，在2013-5-6发布了HTML5的版本，新增了部分面向移动终端的特性。

2.HTML基本结构

<!DOCTYPE >
<html>
    <head>
        <title>页面标题</title>
        <meta charset="UTF-8" />
        <meta name="keywords" content="关键词" />
        <meta name="description" content="" />
    </head>
    <body>
        该部分主要完成页面显示功能,包括块级标签以及行级标签
    </body>
</html>

3.常用的块级和行级标签

3.1 h1 标题标签

  1. 标题标签从h1~h6，如果超出范围，浏览器会按默认形式显示内容。该标签的特征，可以进行标签字体的缩放以及标签的加粗显示效果，一般可以作为命名布局来使用。
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>

3.2段落标签

  1. 表示一个页面中的段落标记，会在上下产生间距。
<p>…</p>

3.3换行标签

<br/>

  br标签显示的效果与段落不同，该标记一般放在一个段落中作为内容间换行使用，因此不会产生上下的间距。

3.4水平线标签

<hr/>

 从浏览器的左侧贯穿到右侧的一条灰色水平线

3.5字体样式

加粗：<strong>…</strong>
斜体：<em>…</em>

  strong: 代表加粗显示 em:代表斜体显示
  在html4中，包括i代表斜体，b代表加粗，在HTML5中已经不建议使用这两种标签。

3.6图像与超链接

  1. img:是image的简写，其中包含src(source)图片路径，alt代表当图片无法显示的提示内容，title鼠标悬停时显示的提示内容，width图片的宽度，height图片的高度，默认的单位都是px像素
<img src="path" alt="text" title="text"  width="x"  height="y" />

 src的选项包括

  • 绝对路劲（不建议）
      通过计算机的本地资源加载文件，例如c:\xxxx\xxx.jpg，如果图片或者是盘符发生了变化，就会导致图片无法加载。
      通过网络的形式加载图片，又可能发生的情况是网络地址变化，或者是网站维护删除了图片，都会导致图片加载失败。
  • 相对路劲
      从当前的文件作为相对参照物找到对应路径的位置，一般都没有盘符，直接通过文件夹的方式进行映射，如果是上层目录，可以使用"../"返回到上一级目录。
  1. a:超链接标签主要依靠与href(hyper refrence)属性实现超链接功能，如果没有添加href属性，最终显示的效果就是一个普通文本，target属性代表要打开的页面形式。
  • targer
      _self:代表从当前的标签页打开
      _blank:代表从一个新的标签中打开
      name: 使用iframe的名字打开对应的页面
<a href="path" target="目标窗口位置">链接文本或图像</a>
  • 普通超链接
  • 锚超链接
      快速定位到当前页面中或者是其他页面中的某个定位点，该定位点即为锚点。
<a href="页面名称#锚点名称">锚点跳转</a>

<a name="锚点名称">
	内容
</a>
  • 功能性链接
      融合了系统调用的功能，比如下面的代码能够实现邮件的发送
<a href="mailto:xxxx@163.com">联系站长</a>

4.列表

  1. 无序列表 (unorder list) ul
      适用于整体页面顺序排版、菜单的功能设计。
      li:代表一个list item项
<ul>
    <li>...</li>
</ul>
  • type:
      disc: 飞盘
      squire: 方块
      circle: 圆形
      none: 没有标记
    type属性已经被废弃了，所以在开发中不要使用。
  1. 有序列表(order list) ol
      特别适合于顺序导航、考试试卷、选择项等。
<ol>
    <li>...</li>
</ol>
  1. 定义列表(defined list) dl
      适合于一些解释性的场景。
      对定义的内容进行解释，所以呈现的效果更加适合一些商品详情、论文设计、电子文稿等方面布局。
<dl>
    <dt>标题</dt>
    <dd>内容</dd>
</dl>

5.表单

  表单是作为客户端与服务器端交互的重要一种组件，其中包含了大量的表单元素

5.1文本框

<input type="text" name="username" id="username" required placeholder="请输入用户
名" autocomplete="off" />

5.2密码框

<input type="password" name="password" id="password" required placeholder="请输入
密码" />

5.3复选框

  复选框：可以同时选中多个选项，但是选项要按组进行设置。同一组的name必须保持一致，表现
值一般都是文本，真实值需要按照实际的需求进行设置。

弹琴<input type="checkbox" name="instr" value="playpiano" />
吹牛<input type="checkbox" name="instr" value="chuiniu" checked />
篮球<input type="checkbox" name="instr" value="basketball" />

5.4单选框

  单选框：同时只能多选其一，name也必须保持一致，如果出现不一致情况，那么所有的单选框都
可以被选中。

男孩 <input type="radio" name="gender" value="boy" />
女孩 <input type="radio" name="gender" value="girl" />

5.5按钮

5.5.1重置按钮

  重置按钮要求放在表单中，可以将表单的元素内容恢复到初始化状态。

<input type="reset" value="重置" />

5.5.3提交按钮

  提交按钮也要放到表单中，可以将表单中的元素数据提交给服务器

<input type="submit" value="提交">

5.5.3图片按钮

  替代提交按钮，使用图片的方式显示。

<input type="image" src=" " />

5.5.4普通按钮

  该按钮默认情况下没有任何的交互机制，需要结合JS实现动态交互功能

<input type="button" value="这是一个按钮"  />

5.6文件域

  文件上传组件

<input type="file" name="pic" />

  当使用文件域时，由于文件可能会由音频、视频、动画等方式组成，所以在设置文件域时，需要设置提
交的方式为post，还需要设置提交的内容为form-data.

<form action="index.jsp" method="post" enctype="multipart/form-data">
<input type="file" name="pic" />
</form>

5.7文本域

  一个多行的文本框，能够通过cols设置宽度，通过rows设置高度。

<textarea cols="200" rows="20">
购买协议：如果从本店购买的商品出现任何的质量问题，一概不换、不退，就这样，咋滴
吧！！！
</textarea>

5.8表单高级操作

5.8.1隐藏域

  当我们需要将数据传输给服务器，但是又不想让用户看到，此时可以使用隐藏域

<input type="hidden" name="" value="必须有值" />

5.8.2只读

  如果在文本框上设置只读，就只能够看到对应的内容，而无法更新修改。

<input type="text" readonly />

5.8.3禁用

  如果在某个元素上添加禁用属性，会导致该元素无法使用。

<input type="text" disabled />

5.8.4标注

  能够快速的通过标签定位到所对应的表单元素上，形成焦点。

<label for="username">用户名</label>
<input type="text" id="username" />

  for属性和id的属性必须对正！

5.9下拉选择框

<select name="select" id="select">
    <option value="篮球">篮球</option>
    <option value="足球">足球</option>
</select>爱好

6.媒体

6.1音频

<audio src="音频路径" autoplay controls />

  1. src对应音频的相对路径
  2. autoplay:自动播放
  3. controls:控制组件

6.2视频

<video src="" autoplay controls />

7.内联框架

<iframe src="默认的页面地址" frameborder="0" scorlling="0" width="宽度" height=“高
度" name="名字" />
<div class="left" style="width: 20%;float:left;margin-left: 20px;">
<ul>
<li><a href="audio.html" target="showframe">百度</a></li>
<li><a href="table.html" target="showframe">搜狐</a></li>
<li><a href="表格.html" target="showframe">163</a></li>
</ul>
</div>
<div class="right" style="width: 70%;float:left">
<iframe name="showframe" src="audio.html" frameborder="0" scrolling="yes"
width="100%" height="500px"></iframe>
</div>

  内联框架适合于后台的管理系统布局。

8.HTML5新增布局

二. CSS3

1. CSS

级联样式表(Cascading Style Sheet),表现HTML或XHTML文件样式的计算机语言。包括对文本、字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。

1.1 CSS样式的优势

  • 内容与表现分离
  • 网页的表现统一，容易修改
  • 丰富的样式，使得页面布局更加灵活
  • 减少网页的代码量，增加网页的浏览速度，节省网络带宽
  • 运用独立于页面的CSS，有利于网页被搜索引擎收录

2. CSS基本语法

选择器 {
    声明
    属性名: 属性值 ;
}

CSS的最后一条的声明是可以被省略的，但是按W3C的标准约定，建议最后一条也要加上;

2.1 HTML中CSS的引用方式

  • 行内样式

    在html的标签中，添加“style”关键词，直接在标签中定义CSS样式。

    <h1 style="color:red">
    
</h1>

    优点：在小范围内可以单独设置一些样式。

    缺点：难以维护。

  • 内部样式

    在当前页面中，定义style,在内部编写CSS代码。

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

    优点: 方便在同页面中修改样式

    缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

  • 外部样式

    单独的建立一个样式文件(.css)，放置在css文件夹当中。

    • 链接式(重点)

      使用HTML标签导入css文件。

      <link href="style.css" rel="stylesheet" type="text/css" />

    • 导入式(了解)

      通过@importcss的指令导入。

      <head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

    • 链接式与导入式的区别

      • 标签属于XHTML，@import是属于CSS2.1
      • 使用链接的CSS文件先加载到网页当中，再进行编译显示
      • 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
      • @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

    • CSS样式应用优先级

      • 行内样式>内部样式表>外部样式表
      • 就近原则

3. 基本选择器

3.1 id选择器

在选择器的前面添加一个"#",在使用时，通过标签中"id"属性进行引用。在同一个页面中，id只能出现一次，作为标识使用，所以应用的面不广，一般都是作为块级布局元素使用。

#div1 { font-size:16px;}

<div id="div1"></div>

3.2 类选择器

在选择器的前面添加一个".",在使用时，通过标签中"class"属性进行引用。最大的优势可以复用，所以在日常操作中应用的最多。

.div1 { font-size:16px;}

<div class="div1"></div>

3.3 标签选择器

利用HTML中的标签作为选择器的名称，特点是一旦选择，所有页面中的相同标签都会被应用相同的效果。

div{

}

<div>
    
</div>

3.4全局选择器

能够将全部的元素统一设置为一种格式

*{

}

4.高级选择器

4.1层次选择器

/*后代选择器*/
div p{
}
/*子选择器*/
div>p{
}
/*相邻选择器*/
div+div{
}
/*通用兄弟选择器*/
div~p{
}

4.2结构伪类选择器

nth-of-child: 在父级里从一个元素开始查找，不分类型

nth-of-type:在父级元素先看类型，再看位置

/*寻找第一个子元素是li的选中，如果第一个元素非li，就不会选中该元素，下面即使出现了li也不会再选
中。*/
ul li:first-child{
}
/*寻找最后一个子元素是li的选中，如果最后一个元素非li，就不会选中该元素，上面即使出现了li也不会
再选中。*/
ul li:last-child{
}
/*找到某个对应的索引li,可以使用odd【奇数】以及even【偶数】进行设置，实现隔行的设置需求*/
ul li:nth-child(2) {
}
/*找到第一个匹配的元素,先看元素的类型，再确定位置*/
ul li:first-of-type{
}
ul li:last-of-type{
}
/*找到某个对应的索引li,可以使用odd【奇数】以及even【偶数】进行设置，实现隔行的设置需求*/
ul li:nth-of-type(n) {
}
nth-of-child: 在父级里从一个元素开始查找，不分类型
nth-of-type:在父级元素先看类型，再看位置

4.3属性选择器

/*在标签中必须包含某个属性*/
input[type]{
}
/*在标签中必须包含某个属性，且某个属性值必须是与条件相等的*/
input[type='button']{
}
/*在标签中必须包含某个属性，且以某个条件作为起始*/
input[type^='b'] {
}
/*在标签中必须包含某个属性，且以某个条件作为结束*/
a[href$='cn']{
}
/*在标签中必须包含某个属性对应的部分内容匹配*/
a[href*='baidu']{
}

5.字体与文本样式

5.1字体样式

5.2文本样式

text-align: left right center justify(两端对齐)

line-height: 行高，当一个元素高度与行高一致时，就会实现垂直居中

text-decoration: overline(上划线) line-through(中划线 删除线)

5.3文本阴影

可以让文本出现阴影的特殊效果

text-shadow: 颜色 x轴 y轴 模糊
p{
/*颜色 x轴 y轴 模糊半径*/
text-shadow: rgba(0,0,0,0.3) 3px 3px 3px;
}

6.超链接伪类

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*没有访问时的样式*/
a:link{
color: gray;
text-decoration: none;
}
/*已经访问过的颜色*/
a:visited{
color: gray;
}
/*鼠标悬停时效果*/
a:hover{
color: red ;
}
/*鼠标激活时效果*/
a:active{
color: blue ;
font-size: 10em;
}
</style>
</head>
<body>
<a href="hello.html">helloworld</a>
</body>
</html>

7.列表样式

7.1 list-style-type

设置列表的样式类型，代表更改列表前面的原始样式

7.2 list-stype-image

设置列表的标识值，将标识值更改为图片样式

7.3 list-style-position

设置列表的标识值显示位置，有俩个可选值

  • inside：
  • outside：

7.4list-style

简写方式，能够同时设置以上的选项内容，通常情况下都是采用none

li{
    list-style:none;
}

8.背景样式

背景样式是在背景颜色之上，能够修饰页面的某个模块的内容，还可以编写文本

8.1 background-color

背景颜色

background-color:yellow;

8.2 background-image

背景图片

{
    background-image:url("相对位置")，url()
    background-image:linear-gradient(方向to xxx ,颜色1，颜色1，...颜色n)    
}

8.3 background-repeat

背景重复形式

  • repeat：沿水平和垂直俩个方向平铺

  • no-repeat：不平铺，即只显示一次

  • repeat-x：只沿水平方向平铺

  • repeat-y：只沿垂直方向平铺

    {
    background-repeat:no-repeat;
}

8.4 background-position

背景定位

应用像素的方式实现位移效果比较常用

  • x轴：正数向右移动
  • y轴：正数向下移动
{
    background:url("") 50px 30px;
}

8.5 background-size

设置背景大小样式

{
    background-size:auto;
}

9.盒子模型

在网页当中，所有的标记（markup）都可以看作是一个个的盒子，通过盒子可以很方便实现定位

9.1宽度

通过width可以设置盒子的宽度

{
    width: 1200px | 100%
}

9.2高度

通过height可以设置盒子的高度

高度无法设置百分比显示形式

{
    height:1200px;
}

9.3外边距（margin）

俩个盒子的距离就是外边距

{
    margin-top:0px;  /*上边距*/
    margin-bottom:0px;  /*下边距*/
    margin-left:0px;  /*左边距*/
    margin-right:0px;  /*右边距*/
    margin: 0px; /*全部的位置设置统一效果*/
    margin: 0px 0px ; /*左右和上下单独设置*/
    margin :3px 5px 7px; /*上和左右以及下分别设置*/
}
/* 在页面中，对拥有固定宽度的块级元素设置"margin:0px auto",可以实现元素的居中显示 */

9.4内边距（padding）

盒子和内容之间的距离就是内边距

内边距可能会修改盒子自身的大小

{
padding-top: xxxpx; /*上边距*/
padding-right: /*右边距*/
padding-bottom: /*下边距*/
padding-left: /*左边距*/
padding: xxx /*全部的位置设置统一效果*/
padding: xxx xxx ; /*左右和上下单独设置*/
padding :3px 5px 7px; /*上和左右以及下分别设置*/
}

9.5 content

盒子中的内容（块级，行级，块级行级元素）

9.6 border(盒子的边框)

  • border-color
  • border-width
  • border-style:
    • none：没有边框
    • dashed：虚线
    • solid：实线
    • dotted：点线
    • double：双实线

9.7 box-sizing

在css中，有俩盒子的显示形式，一种标准文档模式盒子，还有一种IE盒子（怪异盒模型）

  • 怪异盒模型(border-box)：将border、padding、margin再融合content形成一体的大小，可以保持外层盒子总大小不变。

  • 标准盒模型(content-box)：使用content内容部分+内边距 + 外边距 + border宽度是最终的盒子的大小。有可能导致盒子模型的宽度和高度发生变化。

posted @ 2023-03-23 19:26  xiaoyaoya  阅读(46)  评论(0)    收藏  举报