走进HTML和CSS

走进HTML和CSS

1.什么是HTML
(1)HTML：超文本标记语言（Hyper Text Markup Language）
(2)HTML是一种标记语言，描述网页的语言
(3)HTML使用标签描述网页中图片、文本、超链接等

2.HTML基本标签
(1)基本标签

(2)图像标签

<img src="图片路径" alt="替换文本" title="图片标签" width="x" height="y">

(3)超链接标签

<a href="链接地址" target="目标窗口位置(_self或_blank)">文本或图像</a>

(4)注释和特殊符号

(5)W3C标准
1.World Wide Web Consortium，万维网联盟
2.规范
(1)标签名称、属性名称必须小写
(2)标签必须严格嵌套，并且必须闭合，即使空元素标签也 必须闭合
(3)属性值必须用引号引起来

3.CSS的使用

(1)选择器
1.标签选择器:p{font-size:16px;color:red;}
2.类选择器:.second{font-size:20px;color:#096;}
3.ID选择器:#third{font-size:24px;color:black;}

(2)CSS样式优先级
1.行内样式>内部样式表>外部样式表
2.ID选择器>类选择器>标签选择器

(3)字体样式

(4)文本样式

(5)CSS设置鼠标形状

(6)背景属性

(7)表格的基本语法

<table> 
  <tr>
    <td>单元格1</td> 
    <td>单元格2</td> 
    …… 
  </tr>
  …… 
</table>

表格跨列:colspan
表格跨行:rowspan

(8)表单的基本结构

<form method="post" action="result.html">
   <p> 名字：<input name="name" type="text" ></p> 
   <p> 密码：<input name="pass" type="password" ></p> 
   <p>
     <input type="submit" name="Button" value="提交"> 
     <input type="reset" name="Reset" value="重填"> 
   </p>
</form>

1.表达的元素:

2.多行文本域:

<textarea name="showText" cols="x" rows="y">文本内容 </textarea>

3.表单常用属性
(1)隐藏域 : type=“hidden”
(2)只读:readonly=“readonly”
(3)禁用:disabled=“disabled”

(9)CSS高级选择器

4.CSS高级操作
盒子模型
(1)边框样式（border-style)

(2)边框颜色（border-color）
border-top-color、border-right-color、border-bottom-color、border-left-color 、border-color(十六进制)

(3)边框粗细（border-width）
border-top-width、border-right-width、border-bottom-width、border-left-width、 border-width
关键字： thin、medium、thick
像素值：px

(4)边框简写（border）
同时设置边框的颜色、粗细和样式:
border-bottom: 9px #F00 dashed ;
border: 9px #F00 solid;

(5)外边距（margin）
margin-top 、margin-right 、 margin-bottom 、margin-left 、margin

(6)内边距（padding）
padding-left、padding-right、padding-top、padding-bottom 、 padding

(7)display属性
1.控制元素的显示和隐藏
2.块级元素与行内元素的转变

(8)浮动—float属性

(9)clear属性–清除浮动

(10)overflow属性

(11)position属性

(12)z-index属性