天天看点

走进HTML和CSS

走进HTML和CSS

1.什么是HTML

(1)HTML:超文本标记语言(Hyper Text Markup Language)

(2)HTML是一种标记语言,描述网页的语言

(3)HTML使用标签描述网页中图片、文本、超链接等

2.HTML基本标签

(1)基本标签

走进HTML和CSS

(2)图像标签

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

(3)超链接标签

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

(4)注释和特殊符号

走进HTML和CSS

(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)字体样式

走进HTML和CSS

(4)文本样式

走进HTML和CSS

(5)CSS设置鼠标形状

走进HTML和CSS

(6)背景属性

走进HTML和CSS

(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.表达的元素:

走进HTML和CSS

2.多行文本域:

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

3.表单常用属性

(1)隐藏域 : type=“hidden”

(2)只读:readonly=“readonly”

(3)禁用:disabled=“disabled”

(9)CSS高级选择器

走进HTML和CSS

4.CSS高级操作

盒子模型

(1)边框样式(border-style)

走进HTML和CSS

(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

走进HTML和CSS

(7)display属性

1.控制元素的显示和隐藏

2.块级元素与行内元素的转变

走进HTML和CSS

(8)浮动—float属性

走进HTML和CSS

(9)clear属性–清除浮动

走进HTML和CSS

(10)overflow属性

走进HTML和CSS

(11)position属性

走进HTML和CSS

(12)z-index属性

走进HTML和CSS

继续阅读