HTML基础


HTML基础笔记

HTML概述及结构

  1. 是一种标记语言,不是编程语言
  2. HTML文档(网页)由HTML标签和纯文本组成
  3. 文档和页面:HTML文档一般是指含有HTML源代码的纯文本文档,而页面一般是指被浏览器渲染后的最终画面
  4. 一个静态的HTML文档,其后缀名为.html或者.htm,实际工作中,约定为.html

标签

  1. 是富有含义的标记
  2. 有一个开始标签,不一定有结束标签
  3. 标签可以进行嵌套
  4. 标签包含0个或多个属性
  5. 实际工作中,约定:
    • 标签是小写字母(<div> 而不是<DIV>
    • 如果没有结束标签,要在开始标签末尾加上斜杠

元素

编辑器

  1. 根据宿主语言不同,可以选择Visual Studio或者Eclipse
  2. 良好的HTML代码书写习惯是:
    • 标签对称着写,防止忘记闭合标签
    • 标签的属性的值一定要用引号包围
    • HTML代码按块进行层次分明的缩进,学会使用编辑器进行格式化

常用的查阅文档

W3School:http://www.w3school.com.cn/html/


HTML标签使用

块级元素与行内元素

  • 块级元素独占一行,一般代表一个独立的单元;
  • 行内元素在同一行依次排列,一般是内容的表现者;
  • 块级元素可以包含块级元素和行内元素;
  • 行内元素的高度和宽度不可控,依赖于内容的多少;
  • 通过CSS可以改变上面的情况

几个通用属性(常用的)

  • class:指定元素归属的类名
  • id:为元素指定一个唯一标识符
  • style:以内联的方式定义样式(实际工作中一般不允许使用内联方式,CSS章节会详细介绍)
  • title:设置元素的文本标题(为重要的元素设置title是前端开发中的一个好习惯)
  • tabindex:指定元素在Tab键遍历控件时的访问顺序(在表单提交页面,为表单元素设置tabindex同样是个好习惯)

HTML标签总览

  • head节点:

    • link、meta、title、style、script
  • body节点:

    • 排版、段落:div、table span、p、h系列、em
    • 列表:ul、ol、li
    • 定义列表dl、dt、dd
    • 表格:table、tr、td、th
    • 表单:form、input、textarea、select、option

head节点

  • 语义:常用于链接外部样式表文件
  • 常用属性:
    • href:所链接的文件的URL
    • type:制定被链接文件的MIME类型
    • rel: stylesheet
<link rel="stylesheet" type="text/css" href="css/jart.css" />

meta

  • 语义:用于提供关于页面的描述信息
  • 常用属性:name,content, http-equiv
<meta http-equiv="content-Type" cotnent="text/html; charset=UTF-8" />
<meta name="Keywords" content="jArt,jQuery,组件,框架"/>  
<meta name="Description" content="jArt是一个基于jQuery的前端库"/>

title

  • 语义:用于描述页面的标题
  • 常用属性:无
  • 从用户体验的角度来看,一个简短有力的title,非常重要
<title>hello HTML!</title>

style

  • 语义:用于为页面创建内部样式表
  • 常用属性:
    • type:text/css
    • media:一般无需设置,偶尔可能用到print,用于打印设备
  • 实际工作中,一般会明确禁止使用内部样式表!

script

  • 语义:用于引用外部的脚本文件
  • 常用属性:
    • type:text/javascript
    • src:外部脚本文件的URL
<script type="text/javascript"src="jart/jart.js"></script>

body节点

  • 学习body节点,请记住:
      1. 禁止使用表现类的标签!
      1. 禁止使用标签中与样式有关的属性!
  • 标签:b、i、s、big、small、font、center、strong、(br)
  • 属性:width、height、align

div

  • 语义:定义文档中的一个独立的区域或章节,块级元素
  • div是最常用的布局标签
  • 如何把握div布局和table布局:
    • table只用于展现数据
    • div负责总体结构,table可以用于局部的、与表格有关的区域
  • 防止过度div(divitis)
<div class="explorer">各种浏览器支持</div>

span

  • 语义:和div一样是弱语义的,多种用途,是行内元素
  • 一般是作为CSS的钩子来为某段内容添加不一样的样式
<div class=“time”>现在的时间是:<span>2012年5月28日</span></div>

label

  • 语义:为表单类标签创建一个有意义的标记,行内元素
  • 一般使用label的for属性来关联该标签与它所描述的标签,这样,点击label文字时,会自动focus关联的标签。
  • 每个表单控件都应该有一个关联的label,特别是单选、复选按钮,这是个提高用户体验的好习惯:
<label for=“email”>请输入您的邮件地址</label>
   <input type=“text” name=“email” id=“email” />

h系列

  • 语义:作为章节的标题,不同的级别对应章节的重要性或着文档的层次关系
  • 一个页面上只应该出现一个h1标签
  • 外观上看h系列的区别是字体大小,但我们更注重其“重要性”,h1~h6的重要性以此减弱。
<h1>jArt是一个基于jQuery的JavaScript库</h1>

p

  • 语义:段落,块级元素
  • 一般用在文章的正文,如果用在站点本身,最好设置一下样式
<p>它封装了界面开发中的常用逻辑和部件,让用户可以通过简短的代码实现各种复杂的应用。</p>

img

  • 用于Web的图像格式一般有:JPEG、GIF、PNG
    • JPEG:适合展现照片或颜色较丰富的图片
    • GIF:适合展现颜色较单纯的小图片,具有支持动画的特性
    • PNG:具有背景透明的特性,应用广泛(虽然gif图片也有背景透明的特性,但显示效果实在让人无法接受)
  • 语义:图像,自闭和标签,行内元素
  • 常用属性:
    • src:指定图片所在的URL
    • alt:替代文本,在图像加载失败时会显示(为重要图片,比如站点的logo,加上合适的alt说明,是个好习惯)
   <img src="img/logo.png" alt="jArt" />

a

  • 语义:锚标签,用于处理链接
  • 常用属性href:指定用户点击链接时跳转的URL
  • 跳转URL中通过设置#id,可以跳转到页面中相应id元素的位置,#后不加任何id,则跳转到页面顶端
  • a标签的内容如果是图片(img),这默认带有边框,可以通过css设置改变其样式
<a href=“https://www.baidu.com”  title=“baidu” >baidu <img src=“img/logo.png” alt=“baidu”/></a>

ul

  • 语义:无序列表,最常用的列表,块级元素
  • 其子元素只能是 li
<ul class=“explorerlist”>
      <li>Chrome</li>
      <li>Firefox</li> 
      <li>IE</li>
</ul>

ol

  • 语义:有序列表,表示这些项是有顺序性的,块级元素
  • 其子元素只能是 li
<ol class=“schedule”>
      <li> 9:00,项目组会议</li>
      <li>11:30,午餐时间</li> 
      <li>15:25,客户拜访</li>
</ol>

li

  • 语义:列表项,块级元素
  • 可以作为一个容器,可以包含其他元素或纯文本

dl、dt、dd

  • 语义:定义列表元素dl,必须至少包含一条术语(dt)或一条说明(dd),dl只能包含dt和dd,块级元素
  • dt 作为术语,只能包含纯文本或行内元素,一句话的事
  • dd 作为对术语的说明,是块级元素
<dl class=“cookbook”>
      <dt>饺子</dt>
      <dd>中国最受欢迎的美食,<span>新春佳节</span>必备!</dd>
      <dt>包子</dt>
      <dd>你没看错,那些大清早急急忙忙赶公交车的,手里都拎着包子。。</dd>
</dl>

table、tr、th、td

  • 语义:表格table包含了若干行(tr),每行包含若干单元格(td),如果是表头,可以用标题行(th)
  • 请只用他展现数据,就像在Excel中一样
<table class=“price”>
      <tr>
          <th>名称</th> <th>单价(公斤)</th> 
      </tr>
      <tr>
          <td>青椒</td> <td> ¥2.26</td>
      </tr>
      <tr>
          <td>冬瓜</td> <td> ¥1.89</td>
      </tr>
</table>

form

  • 语义:定义一个用于接收用户输入的区域,块级元素
  • 必须指定action属性,标识该表单处理器的URL
  • 可选属性method,两个值:get/post
<form class=“adduser” action=“/user/add” method=“post”>
      <p>昵称:<input type=“text” id=“name” /> </p>
      <p>Email:<input type=“text” id=“email”/> </p>
      <p><input type=“submit” id=“subit”/> </p>
</form>

input

  • 语义:由type属性来决定类型的元素,行内元素
  • 常用属性:type、alt、checked、disabled、readonly、tabindex、value
  • 文本框、按钮、单复选按钮、文件上传
<form class=“adduser” action=“/user/add” method=“post”>
      <p>昵称:<input type=“text” id=“name”/> </p>
      <p>密码:<input type=“password” id=“email”/> </p>
      <p><input type=“submit” id=“subit”/> </p>
</form>
  • input标签的type属性取值:
    • type=“text”:单行文本框
    • type=“password”:密码框
    • type=“checkbox”:复选框
    • type=“radio”:单选框
    • type=“file”:文件上传
    • type=“reset”:表单清除
    • type=“button”:普通按钮
    • type=“image”:图像按钮
    • type=“hidden”:隐藏控件
    • type=“submit”:提交按钮

textarea

  • 语义:多行文本框,块级元素
  • 常用属性:
    • cols:决定了宽度
    • rows:行数,决定了高度
<form class=“adduser” action=“/user/add” method=“post”>
      <p>个人简介:<textarea name=“description” rows=“6” cols=“90”></textarea>  </p>
      <p><input type=“submit” id=“subit”/> </p>
</form>

select

  • 语义:下拉列表框,行内元素
  • 添加属性值multiple=“multiple”可以把它变成多选下拉框
  • 添加属性值selected=“selected”设置默认选中的项
<select name=“color”>
      <option value=“”>选择一种颜色……</option>
      <option value=“green” selected=“selected”>green</option>
      <option value=“pink”>pink</option>
</select>

option

  • 语义:下拉列表项
  • 使用value属性表示该项的值
  • option元素中只能包含纯文本,不能包含其他元素

开发人员小工具HTML

详见使用谷歌自带开发工具调试web


HTML语义化

语义化的含义

如果你的世界里,只有div、table、img…,那么你应该多关注html语义化

  1. 一个HTML元素的存在就应该有他相应的结构化的意义,通俗来说,就是在合适的位置使用合适的标签。
  2. 查阅文档的话,你会看到很多关于语义化的原则,但语义化不应该是死板的,当你开始一个页面代码的编写之前,应该有相应的规划和布局,在细分之后的模块中,只要你有足够的理由,你可以不遵循这些规则。

语义化的好处

  1. 当因为某种不可抗因素导致样式表未成功加载时,站点照样可以有效的浏览;
  2. 对于手机、平板等设备,可以更好的解读你的页面;
  3. 团队协作时,有利于其他组员读懂代码;
  4. 对搜索引擎友好,有助于搜索引擎抓取信息;
  5. 更专业!

语义化

  1. h系列标签作为标题来使用,重要性从 h1~h6 递减;
  2. p标签作为段落使用,大段的说明文字跟应该用它;
  3. 页面的主要结构应该由div来划分;
  4. ul、ol、li作为列表来使用;
  5. table作为表格类数据的展现,不允许用作排版布局;


文章作者: 韩思远
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 韩思远 !
评论
 上一篇
Spring BeanUtils 的选择 Spring BeanUtils 的选择
Spring BeanUtils 的选择 两难!到底用 Spring BeanUtils 还是 Apache BeanUtils? 前言在我们实际项目开发过程中,我们经常需要将不同的两个对象实例进行属性复制,从而基于源对象的属性信息进行后
2019-08-05
下一篇 
Hexo博客搭建和部署 Hexo博客搭建和部署
Hexo博客搭建和部署初探HexoHexo 是什么? Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。Hexo官网:https://hexo.
2019-06-01
  目录