HTML学习小记

HTML是英文Hyper Text Markup Language(超文本标记语言)的缩写。

h1就是一个HTML元素，h1是header1的简写，意思是一级标题。

例：<h1>Hello World</h1>

P是英文paragraph段落的缩写

例：<p>Hello Paragraph</p>

<!--和-->注释

Web开发常见lorem ipsum text占位符，占着位置的文字，没有实际意义。http://www.ruanyifeng.com/blog/2009/04/lorem_ipsum.html

我们可以通过修改h元素的style(样式)来改变某些文本的颜色：<h1style="color: red">helloworld</h1>这叫做元素添加inline style(内联样式)。

然而，更易于维护的方式是使用层叠样式表CSS（Cascading Style Sheets）。


例:<style>
<!--  选择器 {属性名称: 属性值;} -->
  h2 {color: red;}
</style>

类选择器:先声明一个类选择器

<style>
  .blue-text {
    color: blue;
  }
</style>

在CSS中，类选择器应该添加.为前缀,而在HTML中，class属性不能添加.为前缀。

然后在元素上应用：<h2 class="blue-text">CatPhotoApp</h2>

字号是由样式属性font-size来控制的:  h1{font-size: 30px;}

用font-family属性来设置元素的字体:  h1{font-family: Sans-serif; }   

导入谷歌字体:首先用link标签来引入谷歌Lobster字体：<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">置于代码编辑器的顶部就可以将Lobster作为 font-family属性 的值应用到元素上了。

有几种默认的字体Monospace、Serif和Sans-Serif是所有浏览器都可用的,当某种字体不可用时，可以让浏览器自动降级到另一种字体。例:字体为Helvetica不可用时自动降级使用Sans-Serif字体:p {font-family: Helvetica, Sans-Serif;}

使用img元素添加图片(img元素不须结束)，使用src属性指向一个图片的具体地址，例：<img src="xxx.jpg">

CSS包含一个控制元素宽度的width属性:

<style>
  .my-image {
    width: 100px;
  }
</style>

可以应用多个class到一个元素，只需要在多个class之间用空格分开即可。例如：<img class="class1 class2">

CSS 边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)、radius(边框半径)等。

让一个HTML元素的边框颜色为绿色、边框宽度为10像素(px)、边框样式为固体(solid):

<style>
  .my-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }
</style>

可以使用像素或百分比来指定border-radius边框半径的值。