天天看点

【学习笔记】HTML5学习笔记HTML5部分

HTML5部分

导读

  • 浏览器内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。
  • web标准包括结构(html)、表现(css样式)和行为(交互,如javascript)三个方面
  • <!DOCTYPE html>

    就是告诉浏览器使用哪种html版本来显示网页,这里是html5版本
  • lang

    定义网页显示的语言

    en

    为英文,

    zh-CN

    为中文,如果是

    en

    ,则谷歌会提示“是否翻译为中文”?
  • charset

    属性规定html文档用哪种字符编码

1. 路径的概念:

实际工作中,文件不能随便放,需要一个文件夹来管理

相对路径:就是相对于HTML页面的位置

同级路径: 下一级路径:/ 上一级路径:…/

绝对路径:从磁盘开始的路径:C:\USERS\Desktop**,也可以复制网页上的图片链接直接导入网页上的图片

2. 特殊符号代码

在HTML中一些符号需要用相对应字符才能表示,具体如下:

特殊字符 描述 字符的代码
空格符 &nbsp
< 小于号 &lt
> 大于号 &gt
& 和号 &amp
¥ 人民币 &yen
© 版权 &copy
® 注册商标 &reg
° 摄氏度 &deg
± 正负号 &plusmn
× 乘号 &times
÷ 除号 &divide
² 平方2 &sup2
³ 立方3 &sup3

3. 标签及属性介绍

  • 标题标签

    <h1></h1>

    ,标题文字加粗加大,且独占一行
  • 段落标签

    <p>paragraph</p>

  • 换行标签

    <br>

    ,这是一个单标签
  • 加粗标签

    <strong></strong>

    或者

    <b></b>

    ,推荐用前者
  • 倾斜标签

    <em></em>

    或者

    <i></i>

    ,推荐前者
  • 删除线标签

    <del></del>

    或者

    <s></s>

    ,推荐用前者
  • 下划线标签

    <ins></ins>

    或者

    <u></u>

    ,推荐前者
  • <div>

    <span>

    标签是没有语义的,相当于一个盒子来装内容,一个

    <div>

    标签独占一行;而一行可以显示多个

    <span>

  • <img>

    标签用于定义html页面中的图像

    <img src=“图”/>

  • src

    img

    标签的必须属性,用于指定图像文件的路径和文件名
  • alt

    img

    中的一个属性,表示图片显示不出来时替换为文字
  • title

    img

    的一个属性,鼠标放到图片上会出现提示文字
  • width,height,border

    都是

    img

    的属性,以空格隔开,来设置图片的宽度、高度和边框宽度,宽和高只需设置一个即可等比缩放
  • 属性均采取键值对的格式,即

    key=“value”

    属性=“属性值”

  • 外部链接标签

    <a href=”跳转目标” target=”目标窗口弹出方式”>文本或图像 </a>

    ,其中

    href

    必须以

    http://

    开头。

    _self

    是当前窗口打开页面,

    _blank

    是新窗口打开
  • 内部链接:网页内部页面之间的相互链接
  • 空链接

    <a href=”#”> </a>

  • 下载链接,链接地址需为.exe或.zip文件
  • 锚点链接:直接跳转到当前页面中的某个位置:

    <a href=”#id”>点我</a>;

    可以跳转到相应id的位置
  • 注释标签 ,快捷键crtl+/
  • 表格标签:

    <table>

    爷爷,

    <tr>

    爸爸,

    <td>

    孙子
  • <th>加粗</th>

  • table

    的属性有:

    align

    ,规定对其方式;

    border

    ,规定是否拥有边框;

    width

    ,规定表格宽度;

    cellpadding

    规定单元格内文字与边框之间的距离;

    cellspacing

    规定单元格之间的距离。
  • thead

    标签和

    tbody

    标签用来定义表格的头部和尾部,是

    table

    的子标签,

    thead

    里必须包含

    tr

    标签
  • 跨行合并

    rowspan

    ,最上侧单元格为目标单元格
  • 跨列合并

    colspan

    ,最左侧单元格为目标单元格,删除多余格
  • 无序列表

    ul

    里面的内容用

    li

    定义,

    ul

    中只能放

    li

    标签,但

    li

    标签里面可以放任何标签。有序列表

    ol

    ,(很少用)
  • 自定义列表标签

    dl

    ,里面的大哥是

    dt

    ,小弟是

    dd

    dt

    dd

    是并列关系,并不是包含关系,小弟追随大哥显示,

    dl

    只能放

    dt

    dd

    。一个

    dl

    包括一个大

    dt

    和多个小

    dd

  • 表单由表单域

    form

    (总),表单空间和提示信息组成
  • form

    的常用属性有

    action

    (值为

    url

    ,用于指定接受数据的服务器

    url

    地址),

    method

    (值为

    get

    post

    ),

    name

  • 表单控件:

    input

    输入表单元素,必要属性为

    type(button,checkbox,file,hidden,image,password,radio,reset,submit,text)

    ,其他常用属性

    name

    (后台可以通过这个

    name

    属性找到这个表单,单选按钮和复选框必须起相同的名字),

    value

    (表单内默认显示的字以及定义返回给后台人员的内容),

    checked

    (默认勾选内容),

    maxlength

    表单中的提交标签

    submit

    form

    表单中的所有表单元素里面的值提交给后台服务器,后台可以通过表单中的

    name

    来区分表单内容
  • label

    标签用于绑定一个表单元素,当点击

    label

    标签内的文字时,浏览器会自动将焦点/光标转到或选择对应的表单元素上,语法:

    <label for=”sex”>男</label>

    <input type=”radio” name=”name” id=”sex”/>

  • label

    input

    是并列标签,组合使用
  • 下拉选择标签

    select

    ,字标签

    option

    option

    中可以定义

    selected="selected"

    表示默认选中
  • 文本域标签

    textarea

    ,属性有

    rows

    显示多少行,

    cols

    一行显示多少字,实际开发不会用,将通过css来设置。注意:

    textarea

    标签要写到一行上,不然文本域默认会带有大片空白区域

继续阅读