HEAD FIRST HTML NOTE

<!doctype html>html文档开头标注,表明支持最新html规范和标准,可以理解为活的标准,由万维网协会W3C维护,可以向下兼容;任何时候都要使用,除非你确实在写HTML4.01XHTML
<meta charset="utf-8">在head中设置页面字符编码,一般都要指明
<em></em>强调
<del></del>为文本加删除线
<ins></ins>为文本加下划线
<a></a>建立链接
<a href = "https://www.google.com">谷歌<a>
<a target=“_blank” href = "https://www.google.com" title="搜索">谷歌<a>
其中的title是给出链接提示信息,也可应用在其他属性中
target属性告诉浏览器在哪里打开href属性中的链接,其中_blank表示在新窗口中打开
<h2 id="Cofee">Coffee</h2>
为属性添加id进行页面唯一标识
可通过在链接后面添加 /#id 来跳转到指定页面位置
<a href="#top">Back to top</a>返回到当前页面顶部
<strong></strong> 强调加粗
<q></q>短引用
<blockquote></blockquote>长引用

  • 块元素
    <h1> <h2> ... <h6> <p> <blockquote> <ol> <li>...
    显示时前后各有一个空行
    特立独行
  • 内联元素
    <q> <a> <em> <img>...
    在页面文本流中总在“行内”出现
    随波逐流

br换行 ——void元素(没有内容和结束标记的元素)
<li></li>列表项 list item
<ol></ol> 有序列表 ordered list
<ul></ul> 无序列表 unordered list
<ol><li>(或者ulli)要一起使用,离开彼此没有意义,
列表就是一组列表项:
<li>元素用来表示每个元素
<ol><ul>元素把它们归为一组

  • 字符实体(供特殊字符使用,总是以&开头
    > : &gt;
    < : &lt;
    & : &amp;
    ©right; : &copyright; 版权实体

  • img元素
    <img src="图片地址">
    考虑到每个浏览器加载图片的方式和速度问题,或当某些情况无法加载图片时,做好如下说明图片信息方案:
    <img src="图片地址" alt=“描述图片文字”>
    自定义图片的宽度和高度(使用像素数指定)
    <img src="图片地址" width="48" height="100">
    为图像添加链接
    <a href="链接的页面地址"> <img src="图片地址" alt=“描述图片文字”> </a>

下面为web端常用的三种图像格式优劣比较

种类 JPEG PNG GIF
格式 有损 无损 无损
颜色 1600万 PNG-8(2^8种)/PNG-24/PNG-32 256种
透明度 不支持 PNG24不支持,8和32支持 支持(只允许设置一种颜色)
大小 较小 比jpg大 比jpg大
动画 不支持 不支持 支持
适用 保存照片和其他复杂图像 保存logo和其他包含单色、线条或文本的简单图形 同PNG
须知
  • 一定要以<doctype>开头
    每个页面都要从一个doctype开始,这样才能让浏览器和验证工具顺利开展工作;
    任何时候都要使用,除非你确实在写HTML4.01XHTML
  • <html>元素:不能没有它
    紧接着doctype,<html>元素必须是web页面的最顶层元素或根元素。所以,在doctype后面,由<html>标记开始页面,</html>标记结束页面,页面中的所有其他内容都嵌套在这个元素中。
  • 要使用<head>和<body>编写更好的HTML
    只有<head>和<body>元素能直接放在<html>元素中。这说明,所有其他元素都必须放在<head>或<body>元素中,没有例外!
  • 在<head>中指定正确的字符编码
    在<head>中包含一个<meta charset="utf-8">标记。浏览器会感谢你,用户在你的博客上阅读世界各地用户发表的评论时,也会因为你指定了正确的字符编码而感谢你。
  • 没有<title>的<head>算什么
    一定要在<head>元素中包含一个<title>元素。这是必须的。如果没有,则会得到不符合标准的HTML。只能在<head>元素中放置<title>、<meta>和<style>元素。
  • 嵌套某些元素时要当心
    不要把<a>元素嵌在另一个<a>元素中,因为这样会让访问者很迷惑。另外,不允许在<img>void元素中嵌套其他的内联元素。
  • 检查属性
    有些元素属性是必要的,有些则是可选的。如果<img>元素没有<src>属性,就没有意义,alt属性也是必要的。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容