HTML,CSS知识点

1.HTML 简介

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容

2.快,行内,行内块元素

块:div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre、header、section、aside、footer

行内:span、a、lable、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、select、small、sub、e、b

行内块:img、input、textarea

3.表单

1.文本域(Text Fields)

文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

注意:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。

2.密码字段

密码字段通过标签<input type="password"> 来定义:

注意:密码字段字符不会明文显示,而是以星号或圆点替代。

3.单选按钮(Radio Buttons)

<input type="radio"> 标签定义了表单单选框选项

4.复选框(Checkboxes)

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

5. 提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

action提交地址
method提交方式 

4.设置css样式

1.行内

<div style="color: red;"></div>

2.外部引入

<link rel="stylesheet" type="text/css" href="css文件地址" />

3.设置类名,id等xx选择器

<div class="cla" id="ids"></div>

.cla {}

#ids {}

 

5.background;背景

1.background-color背景颜色

2.background-image:url(图片地址)背景图片

3.background-repeat:no-repeat背景图片是否平铺

4.background-attachment:fixed背景图像是否固定或者随着页面的其余部分滚动

5.background-position背景的位置

6.background:#fffff url('img_tree.png') no-repeat right top简写形式
                    颜色        图片路径                是否平铺        背景位置

注:设置背景要么单独设置,要么简写形式设置

6.文本对齐方式

text-align:center,left,right

text-decoration: none;取消a标签的下划线

overline设置上划线 

line-through设置删除线

underline设置下划线

text-transform:uppercase转大写

lowercase转小写
        
      

7.字体

font-size字体大小

font-style斜体

font-family字体样式

font-weight粗细

8.链接

a:link - 正常,未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

9.列表

1.无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表使用 <ul> 标签

2.有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

3.自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

4.注释

ul是unordered lists的缩写 (无序列表)

li是list item的缩写 (列表项目)

ol是ordered lists的缩写(有序列表)

dl是definition lists的英文缩写 (自定义列表)

dt是definition term的缩写 (自定义列表组)

dd是definition description的缩写(自定义列表描述)

nl是navigation lists的英文缩写 (导航列表)

tr是table row的缩写 (表格中的一行)

th是table header cell的缩写 (表格中的表头)

td是table data cell的缩写 (表格中的一个单元格)

5.list-style:none取消列表默认样式

6.list-style: circle;列表的空心圆

7.square列表的正方形

8.upper-roman列表罗马数字

9.lower-alpha列表字母

10.decimal数字

10.表格table

1.表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

2.表格和边框属性

border边框

cellspacing合并外边框

cellpadding合并内容到边框的距离

合并单元格

rowspan行

colspan列
        
         


      
        


        
        

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值