【学习】HTML基础(二)

HTML基础(二)

本文参考了[http://www.w3school.com.cn/html/][6]


HTML CSS

什么是CSS

  • 层叠样式表,从HTML4.0之后的样式都建议从html文档中剥离样式,写到css文件中
  • 例如描述文字大小、颜色、位置等的信息都写到css文件中去
  • 在Chrome浏览器上按F12可以看到页面的源码
  • 源码一般都是把样式剥离出来了

  • 层叠样式表,从HTML4.0之后的样式都建议从html文档中剥离样式,写到css文件中

  • 例如描述文字大小、颜色、位置等的信息都写到css文件中去
  • 在Chrome浏览器上按F12可以看到页面的源码
  • 源码一般都是把样式剥离出来了

    1.外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  • 推荐使用外部样式表,在每一个页面的html中都可以使用css里面的样式
  • 前面的rel规定当前文档与被链接文档之间的关系,stylesheet表示样式表
  • mystyle.css表示样式表和当前html在同一个目录下

    2.内部样式表

  • 在head标签里定义style标签,可以在本html文档中将css文件里的样式做继承
  • 不建议使用

    3.内联样式表

  • 在某一个标签内部加入style,单独改变这个标签
  • 不建议使用,建议全部采用外部样式表

(后面会对css进行专门的学习)

基本元素

  • 链接
 <a herf="www.baidu.com">nihao</a>

链接里面也可以插入标签

<a herf="www.baidu.com"><img src="apple.jpg"></a>

链接不仅仅只能指向其他的网页,也可以指向本网页的其他的地方(锚 
) 
就像百度百科前面的目录一样

<a name="miao">miao</a>
<a herf="#miao">miao</a>

把name替换成id也可以

 <a herf="www.baidu.com" target="_blank">nihao</a>

在新窗口打开target=”_blank” 
从根目录寻找网页target=”_top”


  • 图片
<img src="/img/p.jpg">

body 可以加上background=”background.jpg” 
width属性调整宽度 
height属性调整高度


  • 表格
 <table>
  <tr>
    <th>表头</th>
  </tr>
  <tr>
    <td>第一行第一列</td>
  </tr>    
</table>

  • 列表

1.无序列表

<ul>
  <li>nihao</li>
  <li>zaijian</li>
</ul>

2.有序列表

<ol>
  <li>nihao</li>
  <li>zaijian</li>
</ol>

  • 块级元素
<div>
</div>

  • 内联元素 
    将文本分块
<span></span>

  • 类 
    在css文件或者head中的style里 
    之后就可以在块中加入class=“left”
.left{
text-align: left
}

或者可以对已有的表现设置内部的类 
然后在之后的p标签内部可以加入class=“left”

p.left{
text-align: left
}

  • 布局 
    在css文件中用井号开头,在html的div中id=“”

  • 响应式设计 
    这个要求有点高,有时间我再看

  • 头部标签
<title>题目 必须要有
<base target="_blank" />新窗口打开
<meta>关键字 作者 描述
<link rel="stylesheet" type="text/css" href="mystyle.css" />链接外部资源
}

 

原文地址:https://www.cnblogs.com/bwjiang/p/7838402.html