h5，css

Wenl_z
290 阅读4分钟

HTML的基本结构

HTML是由：标签和内容构成

HTML标签（标记）的语法是由 < 和 > 括起来。

HTML标签有两种：

 双标签：<标签名>....</标签名> 和 单标签：<标签名/>

HTML标签中还可以添加属性：

<标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>....</标签名>

HTML标签规范：标签名小写、属性使用双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，大不了不显示效果。

image.png

HTML注释

html文档代码中可以插入注释，注释是对代码的说明和解释

<!--   这就是唯一的一种HTML注释了   -->

HTML中head头部信息设置

关键字:        	 <meta name="Keywords" content="关键字" />

描述:        	 <meta name="Description" content="简介、描述" />

网页标题:        	 <title>本网页标题</title>

导入CSS文件:    <link type="text/css" rel="stylesheet" href="**.css"/>

CSS代码：    	 <style type="text/css">嵌入css样式代码</style>

JS文件或代码:	 <script >。。。</script>

HTML中常用标签

1.文本标签

<i>...</i>  斜体
<em>...</em>  强调斜体
<b>...</b>  加粗
<strong>...</strong>  强调加粗
<cite></cite>  作品的标题（引用）
<sub>...</sub>下标 <sup>...</sup> 上标
<del>...</del>  删除线

2.格式化标签

<p>...</p> 换段
<hr />          水平分割线
列表：
<ul>...</ul>    无序列表
<ol>...</ol>    有序列表 其中type类型值：A a I i 1 start属性表示起始值
<li>...</li>        列表项
<dl>...</dl>     自定义列表
<dt>...</dt>    自定义列表头
<dd>...</dd>  自定义列表内容
<div>...</div>   常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化
<span>...</span> 常用于包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。

3.图片标签

<img /> 在网页中插入一张图片
    属性
src： 图片名及url地址
alt: 图片加载失败时的提示信息
title：文字提示属性
width：图片宽度
height：图片高度
border：边框线粗细

4.超链接标签

<a href=“ ”>...</a> 超级链接标签， 属性如下：
href: 必须，指的是链接跳转地址
target: 表示链接的打开方式：
_blank  新窗口
_parent 父窗口
_self   本窗口（默认）
 _top    顶级窗口
framename 窗口名
 title：文字提示属性（详情）
锚点链接：
定义一个锚点：<a id="a1"></a> 以前使用的是 <a name="a1"></a>
 使用锚点：    <a href="#a1">跳到a1处</a>

5.表格标签

<table>...</table>  表格标签: 属性：border、 width、 cellspacing、 cellpadding
<caption>...</caption> 表格标题
<tr>...</tr>  行标签
<th>...</th>  列头标签
<td>...</td>  列标签: 跨行属性：rowspan  跨列属性：colspan   

<thead>...</thead>  表头
<tbody>...</tbody>  表体
<tfoot>...</tfoot>  表尾

6.表单标签

<form>...</form>     表单标签
<input /> 	           表单项标签input定义输入字段，用户可在其中输入数据。
<select>...</select> 标签创建下拉列表。
<textarea>...</textarea> 多行的文本输入区域
<button>...</button>       标签定义按钮。
<fieldset> --</fieldset>     元素可将表单内的相关元素分组。
<legend></legend>           标签为 <fieldset>、<figure> 以及 <details> 元素定义标题。
<datalist> html5标签--<datalist>         标签定义可选数据的列表。
<optgroup> html5标签--<optgroup> 标签定义选项组。

7.行内框架标签

     <iframe>...</iframe> 行内框架
     属性：
              src：规定在 iframe 中显示的文档的 URL
      name：规定 iframe 的名称
      height：规定 iframe 的高度。
      width：定义 iframe 的宽度。
      frameborder：规定是否显示框架周围的边框。
例如：<iframe src="1.html" name="myframe" width="700" height="500"></iframe>

8.多媒体标签

<audio>…</audio>   音频标签
<video>…</video>   视频标签
播放Flash的标签
<embed src="./images/haowan.swf" width="300" height="300" />

在HTML中如何使用CSS样式

共计有三种方式：

(1). 内联方式（行内样式）

(2). 内部方式（内嵌样式）

(3). 外部导入方式（外部链入）

优先级：

  当样式冲突时，就采用就近原则，是值css属性离被修饰的内容最近的为主。
  若没有样式冲突则采用叠加效果。

（1）内联样式（行内样式）

就是在HTML的标签中使用style属性来设置css样式

 格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>
 <p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
 <!-- 特点：仅作用于本标签。-->

（2）内部方式（内嵌样式）

在head标签中使用....标签来设置css样式

<style type="text/css">
	....css样式代码
</style>
	<!-- 特点：作用于当前整个页面 -->

（3）外部导入方式（外部链入）

(推荐）就是在head标签中使用<link/>标签导入一个css文件。在作用于本页面，实现css样式设置
	<link href="文件名.css" type="text/css" rel="stylesheet"/>		
    3.2 还可以使用import在style标签中导入css文件。
	<style type="text/css">
		@import "style.css";
	</style>
           <!-- 特点：作用于当前整个网站 -->

常用兼容性选择器

html选择符（标签选择器）

class类选择符 (使用点.将自定义名（类名）来定义的选择符)

Id选择符:

关联选择符（包含选择符）

组合选择符（选择符组）

伪类选(伪元素)择符

image.png

CSS常用属性

1.Color颜色属性
2.字体属性：font
3.文本属性
4.背景属性：background
5.边框：border
6.内补白：padding
7.外补白：margin
8.定位：position
9.布局：Layout
10.弹性盒子

网页布局的三种方式

1.传统的DIV+CSS布局

2.HTML5语义化标签+CSS3布局

3.响应式布局

1.传统的div+css布局： image.png 2.HTML5语义化标签+CSS3布局： image.png

<header>  定义页面或区段的头部（页眉）
	<footer>    定义页面或区段的尾部（页脚）
	<nav>         定义页面或区段的导航区域（导航）
	<section>  页面的逻辑区域或内容组合（区块）
	<article>    定义正文或一篇完整的内容（文章）
	<aside>      定义补充或相关内容（侧边栏）

3.响应式布局：

第一种：直接在页头中使用CSS样式修饰。
<style type="text/css">
	/* 宽度范围 最高度*/
	@media all and (min-width:300px) and (max-width:800px){
		body{
			color: red;
		}
	}
	@media all and (min-width:100px) and (max-width:300px){
		body{
			color: green;
		}
	}
</style>

第二种：导入不同的css样式文件：
<link media="all and (min-width:300px) and (max-width:800px)" 
		rel="stylesheet" href="my.css" />

<link media="all and (min-width:100px) and (max-width:200px)" 
		rel="stylesheet" href="test.css" />

注意：使用HTML5 语义化标签的布局模式在IE9以下浏览器不兼容，可使用下面的代码解决。

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script> 
<![endif]-->
avatar
文章
阅读
粉丝