HTML&CSS基础学习

HTML&CSS学习

一丶HTML

1.定义及作用:HTML就是超文本标记型语言,其作用就是对网页编辑.

2.标签(元素):

 1>.字体标签:

 文字标签:<font color=”” size=””>文字内容<font>

 标题标签:<h1>标题</h1>...<h6>标题</h6>

 水平线标签:<hr/>

 注释标签:<!--注释的内容-->

 特殊标签: 代表空格

 2>.列表标签:

 <dl>

     <dt>上级内容</dt>

      <dd>下级内容1</dd>

      <dd>下级内容2</dd>

  </dl>

效果:

上级内容

  下级内容1

  下级内容2

有序标签:

  <ol type=”排序方式(数字=1,阿拉伯数字=i或I,字母=a或A”)”>

      <li>排序内容一</li>

      <li>排序内容二</li>

      <li>排序内容三</li>

  ...

</ol>

无序标签:

<ul type=” 符号=square,circle或disc”>

<li>内容一</li>

<li>内容二</li>

....

</ul>

3>.图片标签:

<img src=”图片来源” width=”图片宽度px” height=”图片高度 px” alt=”鼠标悬浮图片上的内容”>

4>.超链接:

<a href=”连接目标”>点击此打开连接目标</a>

可将图片作为超链接:<a href=”连接目标”><img src=”图片来源”></a>

5>.表格标签:

<table border=”显示线框的粗细” bordercolor=”线框的颜色” cellspacing=”单元格之间的空白大小” cellpadding=”单元格内容与单元格之间的距离”>

<tr>  <!--控制行-->

<th align=”对齐方式”>内容被加粗并居中显示</th>  <!--行中的存储格-->

<td align=”对齐方式”>一行中的一个存储格</td>

</tr>

</table>

6>.表单标签

表单作用:将输入的数据上传到服务器

Form标签:

<form action=”上传到服务器的地址” method=”提交方式,默认get ,可选择post”></form>

输入标签:

<input type=”输入的类型” name=” ” value=””/>

输入的类型主要有:radio单选输入,注意:同一个组的name的值值必须相同;checkbox复选框;text一般文本输入;password输入密码

下拉选框:

<select >

<option>下拉内容1</option>

<option>下拉内容2</option>

</select>

文本域:

<textarea cols=”列长度” rows=”行的长度”></textarea>

提交按钮:

<input type=”submit” value=”按钮的名称”/>

<input type=”image” src=”图片路径”>图片作为按钮

重置按钮:

<input type=”reset” value=”按钮名称”/>

 

二丶css

定义:层叠样式表,作用结合HTML使用优化网页

Css与HTML的集合方式:

第一种:直接在HTML中的标签属性写入css代码<div style=”css代码”>

第二种:使用HTML标签<style type=”text/css”>div {css 代码}</style>

第三种:使用link,将head里面<link rel=”stylesheet” type=”text/css” href=”css路径”>

Css的选择器:

标签选择器:将标签作为选择器

Class选择器:在HTML标签中属性定义class属性赋值,

.值{

css代码

}

Id选择器:在HTML标签中属性定义id属性并赋值,

#值{

css代码

}