开发工具:HBuilder

  创建项目:

    在电脑本地磁盘创建项目目录,如"D:\project"

    打开HBuilder,这个工具默认会创建一个项目,我们删掉即可,然后新建项目:"文件"---"新建"---"web项目"

    配置一个项目名:html_css_quick_satrt, 项目路径为:D:\project

    点击"完成"

 

第一个网页

html元素关系

  父子关系、兄弟关系、子孙关系、后代关系

注释

  作用:方便别人或者自己阅读代码

  写法: <!-- 这里写注释的内容!-->

  快捷键: ctrl + /

字符实体

  html文档中有些字符具有特殊含义,最明显的就是< 和 >这两个字符。有时候需要再文档中用到这些字符,但是又不想被当做HTML来解析处理。因此产生了字符实体,也就是HTML实体。实体是浏览器用来代替特俗字符的一种代码。注意:实体名称对大小写敏感

显示结果 描述 实体名称 实体编号
  空格 &nbsp;  
< 小于号 &lt; <
> 大于号 &gt; >
& 和号 &amp; &
" 引号 &quot; "
' 撇号  &apos; (IE不支持) '
分(cent) &cent; ¢
£ 镑(pound) &pound; £
¥ 元(yen) &yen; ¥
欧元(euro) &euro;
§ 小节 &sect; §
© 版权(copyright) &copy; ©
® 注册商标 &reg; ®
商标 &trade;
× 乘号 &times; ×
÷ 除号 &divide; ÷

标签

div标签表示一共区块或者区域,你可以把他看成一共容器
作用:用来把网页分块,并且里面可以装任意的html元素   <div>这里是一个div容器</div>

div

可以表示一个小区块,比如一些文字,span和div的不同就是span能够在一行内显示,而div独占一行

  <span> 一周热门排行榜</span>

span

h1到h6这6个标签表示6级标题,数字越大,文字越小

  <h1>创于心, 兑于行</h1>
  <h2>创于心, 兑于行</h2>
  <h3>创于心, 兑于行</h3>
  <h4>创于心, 兑于行</h4>
  <h5>创于心, 兑于行</h5>
  <h6>创于心, 兑于行</h6>

h1-h6

p标签是段落标签,通常用来装一整段文字,在一篇文章中常用

  <p>
   新华社北京2月6日电 今天天气非常好....
  </p>

p

ul为无序列表标签,li为里面每个列表项目,这个标签非常实用,例如:各种菜单,各种新闻排行榜都可以用无序列表实现

  <h1>奇葩新闻</h1>
  <ul>
    <li>三人花20万人民币造出17万假币</li>
    <li>英国马拉松仅一人完成比赛,第二名带着5千人跑错路</li>
    <li>在曹操墓发现一具小孩尸骨,专家说是小时候的曹操!</li>
  </ul>

ul li

i、em标签表示斜体,strong标签表示加粗,hr表示一根水平分割线,表示换行

  <i>床前明月光</i>
  <em>疑是地上霜</em>
  <strong>举头望明月</strong>
  <hr>
  <p>低头思<br>故乡<p> 

i em strong hr br

img标签表示图像,可以引入一张图片

  scr的属性值是图片的地址
  alt表示当图片没有被正确加载的时候显示的文字
  title表示当鼠标移动到图片的时候显示的文字   <img src='img/1.png' alt='heboan' title='头像' />

img

a标签表示超链接

  href表示链接的地址
  target属性值_blank,如果加上这个属性,每次点击的时候会新开一个浏览器标签来显示链接的内容   <a href='http://www.baidu.com' target='_blank'>百度一下</a>

a

最新文章

  1. .net Global.asax文件使用
  2. JS对象深刻理解 - 2
  3. 将一列包含多个ID拆分多行
  4. Xamarin Android中引用Jar包的方法
  5. MySQL binlog-do-db选项是危险的
  6. FPGA一个博客学习
  7. 封装Log工具类
  8. html5自带表单验证-美化改造
  9. CodeForces 370A Rook, Bishop and King
  10. 使用nginx处理静态资源请求,其余交给node
  11. Java 学习笔记 二维数组和对象数组
  12. nodejs 动态创建二维码
  13. Custom Default Node Colors and Shapes in Houdini 16.5
  14. 【CPU微架构设计】利用Verilog设计基于饱和计数器和BTB的分支预测器
  15. 【Go】go get 自动代理
  16. bootstrap-table方法之:合并单元格
  17. 学习笔记-AngularJs(五)
  18. Comment类型
  19. currentTarget
  20. C++ 中的continue理解

热门文章

  1. bzoj 2426 【HAOI2010】工程选址 贪心
  2. django自己搭建的博客
  3. linux下解压,压缩命令大全---方便新手查看
  4. HTTP中的URL长度限制
  5. HDU 5685 Problem A | 快速幂+逆元
  6. 【poj3260-最少找零】多重背包+完全背包
  7. 【CodeForces】841C. Leha and Function(Codeforces Round #429 (Div. 2))
  8. 用 letsencrypt 生成 SSL 证书
  9. 【洛谷 P1251】 餐巾计划问题 (费用流)
  10. 【Git】GitHub之多人开发一个项目