前端HTML,CSS(上)

1.HTML小记, 

1. 概述:

​​

<h1></h1>就是标题标签

3.  <p></p>是段落标签。

4.      网页上那张小女生的图片,由img标签来完成的,

        它在网页上的代码写成<img src="1.jpg">

 

5.html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多了一个/。

如:

<p></p>

标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:<div>里嵌套<p>,那么</p>必须放在</div>的前面。如下图所示。

​​

6. . HTML标签不区分大小写,<h1>和<H1>是一样的,但建议小写,因为大部分程序员都以小写为准。

7.什么是代码注释?代码注释的作用是帮助程序员标注代码的用途

语法:

<!--注释文字 -->

8. <body>标签,网页上显示的内容放在这里

9.标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

​​​​

10. 加入强调语气,使用<strong>和<em>标签

<em> 默认用斜体表示,<strong> 用粗体表示。

2.  <span>标签是没有语义的,它的作用就是为了设置单独的样式用的。

11.    1. <q>引用文本</q> ; 注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。

        2. <blockquote>标签,长文本引用  语法:<blockquote>引用文本</blockquote> (浏览器对<blockquote>标签的解析是缩进样式)

      ​​ 

      3.在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。

 

      4.要想输入空格,必须写入&nbsp;。

      ​​

 

      5.<hr>标签,添加水平横线。html4.01版本: <hr>  xhtml1.0版本: <hr />

      注:<hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。

 

      6. <address>标签,为网页加入地址信息

      语法:<address>联系地址信息</address>

 

      7.使用<code>标签,当代码为一行代码时,你就可以使用<code>标签,注:如果是多行代码,可以使用<pre>标签。

      语法:<code>var i=i+300;</code>

      语法: <pre>语言代码段</pre>

 

12.使用ul,添加信息列表

1.ul-li是没有前后顺序的信息列表。

<ul>

  <li>信息</li>

  <li>信息</li>

  ......

</ul>

2. ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点,如:

​​

3.<ol>标签来制作有序列表来展示。

语法:

<ol>

  <li>信息</li>

  <li>信息</li>

  ......

</ol>

如:        ​​

4.把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。

语法:<div>…</div>

5. 给div命名    <div  id="版块名称">…</div>

6.创建表格的四个元素:

table、tbody、tr、th、td

1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)

3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

5、<th>…</th>:表格的头部的一个单元格,表格表头。

6、表格中列的个数,取决于一行中数据单元格的个数。

注:1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的

2、表头,也就是th标签中的文本默认为粗体并且居中显示

7.caption标签,为表格添加标题和摘要

摘要:<table summary="表格简介文本">

标题语法:

<table>

    <caption>标题文本</caption>

    <tr>

        <td>…</td>

        <td>…</td>

        …

    </tr>

</table>

13.使用<a>标签,链接到另一个页面

1.<a>标签可实现超链接语法:

      <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

2.title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容

3. 在新建浏览器窗口中打开链接 <a href="目标网址" target="_blank">click here!</a>

4.使用mailto在网页中链接Email地址    利用mailto做许多其它事情:

​​

注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

5. <img>标签的使用:

​​

14. 使用表单标签,与用户交互

1.网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端

2.语法:      <form  method="传送方式"  action="服务器文件">

3.表单讲解

​​

4.文本输入框、密码输入框

​​

5. 文本域,支持多行文本输入

​​

6.单选框和复选框

1.两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。

​​

例子:

​​

注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

7. 使用下拉列表框,节省空间

1.例子:

​​

讲解:

1、value:

​​

2、selected="selected":

设置selected="selected"属性,则该选项就被默认选中。

8. 使用下拉列表框进行多选

1.在<select>标签中设置multiple="multiple"属性,就可以实现多选功能

例子:

​​

9.使用提交按钮,提交数据

​​

10.使用重置按钮,重置表单信息

1.比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。

​​

11.form表单中的label标签

​​

2.CSS小记,

CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。

​​

2.

​​

3.CSS代码语法

​​

4.CSS注释代码

​​

5.内联式css样式

​​

6.外部式css样式,写在单独的一个文件中

​​

注:三种式的优先级:他们的优先级:内联式 > 嵌入式 > 外部式 

其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)。

7.什么是选择器?

​​

8.类选择器

​​

9.ID选择器

​​

10.类和ID选择器的区别

​​

​​

11.子选择器

​​

12.包含(后代)选择器

​​

13.通用选择器

​​

14.伪类选择符

​​

15.分组选择符

​​

16.继承

​​

17.特殊性

​​

18.层叠

​​

19.重要性

​​

20.文字排版--字体

​​

21.文字排版--字号、颜色

​​

22.文字排版--粗体

​​

23.文字排版--斜体

​​

24.文字排版--下划线

​​

25.文字排版--删除线

​​

26.段落排版--缩进

​​

注意:2em的意思就是文字的2倍大小。

27.段落排版--行间距(行高)

​​

28.段落排版--中文字间距、字母间距

​​

29.段落排版--对齐

​​

30.元素分类

1.在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。

​​

31.元素分类--块级元素

​​

32.元素分类--内联元素

​​

33.元素分类--内联块状元素

​​

34.盒模型--边框(一)

1.盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

​​

35.盒模型--边框(二)

​​

36.盒模型--宽度和高度

​​

​​

37.盒模型--填充

​​

38.盒模型--边界

​​

39.css布局模型

在网页中,元素有三种布局模型:

1、流动模型(Flow)

2、浮动模型 (Float)

3、层模型(Layer)

1、流动模型(Flow):

​​

​​

2.浮动模型

​​

​​

3.层模型

​​

(1)层模型--绝对定位

​​

​​

(2)层模型--相对定位

​​

​​

(3)层模型--固定定位

​​

40.Relative与Absolute组合使用

​​

41.颜色值缩写

​​

42.字体缩写

​​

​​

43.颜色值

​​

配色表:

​​

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值