首页 > 代码库 > 慕课html,css笔记(一)

慕课html,css笔记(一)

<ul>

   <li>...</li>

   <li>...</li>

</ul>

每项前都有一个小圆点。

<ol>

   <li>...</li>

   <li>...</li>

</ol>

每项前都有序号,默认从1开始。

<div>标签是能够批量化处理块内的元素,文档会被分为独立有个性的部分。

id属性为<div>提供唯一的名称。<div  id="块的名称">...</div>

 

表格元素 table,tbody,tr,th,td

表格以<table>...</table>结束     <tbody>...</tbody>表格内容很多的时候等表格内容全部加载完后显示

<table>

     <tbody>

         <tr>                  <!--行标签-->

            <th>...</th>       <!--表格头部小组名-->

         </tr>

         <tr>                  <!--另一行-->

            <td>...</td>            <!--列标签,在th标签内容下-->

         </tr>

     </tbody>

</table>

没有添加css样式前是没有边框的。

 

css样式

<style type = "test/css">......</style>

<table summary="表格内容">     这是摘要语法,不会在浏览器中显示,增加表格的可读性。

<table> 

     <caption>标题文本</caption>

</table>

 

<a href="http://www.mamicode.com/目标网址"  title="鼠标划过时显示的文本"  target="_blank">链接显示的文本</a>

a标签默认在当前窗口打开,target="_blank"属性在新窗口打开a标签

<a href="mailto:yy@imooc.com ?cc=xiaoming@imooc.com &bcc=xiaoyu@imooc.com &subject=主题 &body=邮件内容">链接显示文本</a>

mailto后有多个参数时,第一个参数以 ? 开头,后面的参数用 & 分隔。

 

<img src="http://www.mamicode.com/myimage.gif"  alt="MyImage"  title="My Image"/>相对路径下的插入图片

src:图像的位置   alt:当图片不见时,可以看到该属性指定的文本  title:(鼠标滑过图片时显示的文本)

 

文本,密码输入框:

<form>

    <input type="text/password"  name="名称"  value="http://www.mamicode.com/文本" />

</form>

type="text"文本输入框   type="password"密码输入框           name:为文本框命名,以备后台程序ASP,PHP使用     value:提交给服务器的值

输入大量文字时,要用到文本输入域。<textarea  rows="行数"  cols="列数">文本</textarea>

单选,复选框  <input type="radio/checkbox"  value="http://www.mamicode.com/值"  name="名称"  checked="checked">(radio单选 checkbox复选)

checked="checked" 默认被选中。同一组的单选按钮name取值一定要一致。

使用下拉列表框:  

<select>

      <option value="http://www.mamicode.com/看书">看书</option>

      <option value="http://www.mamicode.com/旅游" selected="selected">旅游</option>

</select>

设置selected="selected"属性,选项默认选中。

<select multiple="multiple">实现多选功能     windows下,按下ctrl同时单击,可多选。

<input type="submit"  value="http://www.mamicode.com/提交">     type的值设置为submit时,按钮才有提交作用。

<input type="reset"    value="http://www.mamicode.com/重置">

 

css样式

css样式是选择符和声明组成,声明又由属性和值组成。    css注释:/*注释内容*/

p {color:red} 其中p是选择器,{}及其内容是声明,color是属性,red是值。 选择符=选择器,指明网页中要应用样式规则的元素。

 

css代码插入有内联式,嵌入式和外部式

内联式:<p style="color:red">红色</p>

css样式代码要写在style="  "双引号中,若多条css样式代码可写在一起,中间用分号。<p style="color:red;font-size:12px">文字</p>

嵌入式:把css样式代码写在<style type="text/css"></style>

比如:<style type="text/css">

                  span{color:red;}

        </style>                                              而<style>在<head></head>之间

外部式:把css代码写在一个单独的外部文件中,以.css为扩展名,在<head>内(不在<style>内)

比如base.css是两一个文件的名称,其代码是  span{color:red;} 另一文件在<span>标签显示的文字会变红。css样式文件名称

除去base.css文件会有.html为扩展名的文件,在文件内<head>标签下有link标签<link href="http://www.mamicode.com/base.css"  rel="stylesheet"  type="text/css"/>

rel="stylesheet" type="text/css"是固定写法,不可修改。

这三种样式优先级是  离被设置元素越近优先级别越高。

 

慕课html,css笔记(一)