一个网页主要由三部分组成:结构(htmi)、表现(css)还有行为(javascript)
<!doctype html>声明
<html>文档起始
<head>文档头部区域
<meat char="utf8">字符集
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob"> 所有meta显示在head 里
所有 meta 标签显示在 head 部分...
<title>网页标题</title>
</head>
<body>网页显示内容
<div>包裹指定区域style="color:red"可设置颜色 </div>
<h1>标题1</h1>
<h2>标题2</h2>
<p>段落</p>
<blockquote>标识引用文本</bloquete>
<q>引用短文本</q>
<b>加粗</b>
<strong>这 也 是加粗</strong>
<i>斜体</i>
<em>这 也 是斜体</em>
<big>字体放大</big>
<small>字体缩小</small>
<!--列表标签--> 注释
<ul>无序
<li> 列表内容</li>
</ul>
<ol>有序
<li>列表内容</li>
</ol>
<dl>定义列表
<dt> 标识词条name</dt>
<dd>解释标识 姓名</dd>
</dl>
<a href="http://www.baidu.com" ></a> 超链接
</body>
</html>
图片标签
<img src="显示图的url" alt=''图片无法正常时显示的文本''> 插入图片必须有src 和alt
表格标签
<table> 表格结构</table>
<table border="1">定义表格边框</table>
<caption>表格标题</caption>
<th>表头会显示为粗体居中的文本<th>
<tr>表格 行</tr>
<td>表格数据</td>
表单标签
<form> 表单结构
<p>单用户:<input></p>
<p>密码<input></p>
<p>多行文本域<textarea><textarea></p>
<p>复选 框1<input type="checkbox">
复选 框2<input type="checkbox">
</p>
<p>单选 按钮<input type="radio"></p>
<p>下 拉菜单<select>
<option>选 项1</option>
<option>选 择2</option>
</p>
</form>
空格
<字符实体(<);> 字符实体(>)
<a href=http://www.baidu.com target="_blank"(代表在新的页面打开超链接)></a>
<br>换行
内联标签:
<iframe src=" 需要引入的页面的路径" >…</iframe>
css
伪类选择器:
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 指定第几个元素(2n或even代表偶数位的元素,2n+1或odd代表奇数位的元素)
:only-child 仅一个子元素
:first-of-type 标签类型的同类型中第一个
:last-of-type 标签类型的同类型中最后一个
:nth-of-type(n) 标签类型的同类型中第n个
:not() 否定伪类,将符合条件的元素从选择器中剔除 如 :not(:first-of-type)
a标签额额伪类:
<a href="网址 " >
:link 没有访问过得链接,可设置样式
:visited 访问过的链接
:hover 鼠标移入的状态
:active 鼠标点击时的状态
伪元素的的选择器(::)
::first-letter 第一个字母
::first-line 第一行
::selection 选中的内容
::before 元素的开始 (before和after必须必须结合content属性使用)
::after 元素的最后 (before和after必须必须结合content属性使用)
布局常用样式属性:
`width 宽度
`height 高度
`background 背景色或背景图片
`border 四周边框(如:border:1px solid black;设置元素四周边框是1像素宽的黑 色实线)
`border-top 顶部边框
`border-left 左边边框
`border-right 右边边框
`border-bottom 底边边框
`padding 内边距,(padding-top,padding-left,padding-right,padding-bottom)
`margin 外边距 (margin-top,margin-left,margin-right,margin-bottom)
文本常用样式属性:
color:字体 颜色
font-size:字体大小
font-family:字体类型
font-weight:字体加粗
line-height:字体的行高
text-decoration:字体的下划线(如:text-decoration:none;将文字下划线去掉)
solid :实线
dotted:点状虚线
dashed:虚线
double:双线
border-style默认值空,没有边框