HTML基础复习(一)

标题分6个等级,从<h1>到<h6>
<h1>这是一个一级标题<h1>
如何让你的标题变红
<h1 style="color:red">title</h1>
即使用style属性中的color,这是style的内联样式
如果需要配置的属性过多,可以使用<style>结合css

1
2
3
4
<style>  
选择器{属性名称:属性值;}
example: h2{color:red;}
</style>

注:一定要在属性值的后面加上分号

类选择器

1
2
3
4
5
<style>
.类名{
}
</style>
<h2 class="类名">title2</h2>

class=”类A 类B 类C…”
可以应用多个类,但是必须用空格隔开

改变文章的字体大小可以用font-size属性
改变文章的字体可以用font-family属性
当某种字体不可用时,可以让它自动降级到另一种字体
example:

1
2
3
p{
font-family: Helvetica,Sans-Serif;
}

当Helvetica字体不可用时,字体会自动降级到San-Serif

  • img元素
    img是自关闭元素,不需要结束标记
    <img src=图片的具体地址>
    若要设置图片宽度,可用CSS中的width属性
    给图片添加边框,可以用border-width,border-tstyle与border-color三个属性
    若想要添加圆角边框,则可以用属性border-radius,参数可以是像素,也可以是百分比
    alt属性:当图片因为各种原因无法加载时显示的替代文本

  • a元素
    anchor元素,可以用来连接到外部地址实现页面跳转功能,也可连接到当前页面的某部分实现内部导航功能
    <a href="URL">anchor text</a>
    但是如果你暂时不知道要跳转到哪里的时候,可以用#代替,别名哈希符号
    href="#"
    想把一张图片作为一个连接,直接将图片嵌套进a元素即可
    <a><img></img></a>

  • ul元素
    创意一个无序列表,包含多个li元素

1
2
3
4
<ul> 
<li></li>
<li></li>
</ul>
  • ol元素
    与无序表用法类似,在ol中嵌套多个li元素

  • input元素
    input元素是自关闭的
    其中初始化方框的文本为属性placeholder
    <input type="text" placeholder="预定义文本">
    如果要设置必填,则添加上required属性即可
    <imput type="text" required>

  • button元素
    定义一个按钮

单选按钮(type=”radio”)
用来定义单选按钮,在多个选项中只能选一个,嵌套在自己的label元素中,所有关联的单选按钮要使用相同的name属性
example:

1
2
<label><input type="radio" name="indoor/outdoor">indoor</label>
<label><input type="radio" name="indoor/outdoor">outdoor</label>

多选按钮(type=”checkbox”)
可以被多选

多选按钮和单选按钮都可以用checked属性来表明默认被选中

背景颜色可以用background-color属性来设置

设置id会对以后的jQuery有好处(小本本记下来)
<div id="id号">
在style元素中的表示方法为

1
2
3
#{
属性;
}