1、语法和规范

HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。
HTML文件分为头部分(<head></head>)和体部分(<body></body>)
HTML标签都是由开始标签和结束标签组成。(<hr />)
HTML标签不区分大小写,建议使用小写。

2、HTML相关标签学习

  2.1标题标签

  标题标签使用<hn />,n从1到6字体大小逐渐变小,超过6的按6显示
    特点:加粗加黑,单独占用一行,与其他行有一定行间距
    注释:<!--注释内容--> 快捷键Ctrl+/

  2.2水平线标签

  水平线标签 <hr />

  2.3段落标签

  段落标签<p></p>

  2.4字体标签

  字体标签<font></font>
  必须结合其属性才能具备一定的样式效果。

      属性:size:指定内容的大小(从1到7逐渐变大,超过7的按照7来显示)
           color:指定内容的颜色(可以是英文单词,也可以是十六进制)
           face:指定内容的字体(那些字体必须是你本机已经有的)

  加粗:<b></b>
  斜体:<i></i>
  下划线:<u></u>

  注意:HBuilder同样支持Alt+/自动输出提示。

3、在HBuilder中新建HTML文件,命名为网站信息显示页面,代码如下:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站信息显示页面</title>
</head>
<body>
<!--1.创建一个标题标签-->
<h2>皮囊师</h2> <!--2.创建一条水平线标签-->
<hr /> <!--3.分别创建段落标签-->
<p>
<font color="red">演皮影戏的师傅</font>正弓着背在一张矮桌子上修补坏了的皮影。他的手边有好多皮影,有红有绿,有男有女,有兔有马,仿佛一个完整的世界。而他,就是那个世界的造物主。     
</p> <p>
世人皆知<b>皮囊师</b>,而很少听说<i>操控师</i>,是因为绝大部分人只注重容颜,而不注重行为举止。皮囊师兴盛于皇城,尤其后宫,操控师也兴盛于皇城,但在后宫不如皮囊师受欢迎。只有少数皇帝的嫔妃知道,容颜只能引起皇帝的注意,但那只是一时之兴,而行为举止才能让皇帝处久不厌。于是,宫中出现了一种女官,名为司仪,授九品衔。司仪专门教宫中女人举止仪态,后来又教一些关系亲密的嫔妃如何勾引皇帝,让皇帝恋恋不舍,尽可能多地逗留。
</p> </body>
</html>

保存文件,点击在浏览器内运行,效果如下:

HTML基础——网站信息显示页面的更多相关文章

  1. HTML基础——网站友情链接显示页面

    1.列表标签 有序列表:type默认是1,2,3……,reserved指降序排列 <ol type="I" start="" reversed=" ...

  2. laravel基础课程---4、Laravel基础网站结构搭建

    laravel基础课程---4.Laravel基础网站结构搭建 一.总结 一句话总结: 1.搭建网站前后台路由:在路由组Route::group()中设置好命名空间和前缀 2.搭建控制器:比如1)新建 ...

  3. 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  4. Bootstrap <基础二十三>页面标题(Page Header)

    页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...

  5. 如何在一个网站或者页面写js

    如何在一个网站或者页面写js: 1. JS的分层(功能):jquery(tools)  组件(ui)  应用(app).mvc(backboneJS) 2. JS的规划(管理):避免全局变量和方法(命 ...

  6. 用Teleport Ultra下载网站全部页面 爬虫

    测试case,就是把Commons-FileUpload 的API下载来   上网查的时候我才发现这是一个由很多页面组成的网站,下载起来很麻烦.   怎么办呢?呵呵,一定是有办法的.Teleport ...

  7. php的借用其他网站的页面覆盖Logo的技巧

    php的借用其他网站的页面覆盖Logo的技巧, <body> <div id="red_f"></div> <div class=&quo ...

  8. 【ASP.NET 问题】ASP.NET 网站404页面返回200,或者302的解决办法

    做网站在优化网站时遇到了跳转404页面却返回 200.302状态的问题,这样的话搜索引擎会认为这个页面是一个正常的页面,但是这个页面实际是个错误页面,虽然对访问的用户而言,HTTP状态码是“404”还 ...

  9. HTML&CSS——网站注册页面

    1.表单标签 所有需要提交到服务器端的表单项必须使用<form></form>括起来! form 标签属性:  action,整个表单提交的位置(可以是一个页面,也可以是一个后 ...

随机推荐

  1. Spark任务调度

    不多说,直接上干货! Spark任务调度 DAGScheduler 构建Stage—碰到shuffle就split 记录哪个RDD 或者Stage 输出被物化 重新提交shuffle 输出丢失的sta ...

  2. vue中通过js控制页面样式方法

    在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置.宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不 ...

  3. 后台通过Request取得多个含有相同name的控件的值

    string[] arrWeight = context.Request.Params.GetValues("Quantity");

  4. Thingworx 使用REST API获取JSON数据

    版本:7.4.1 1.URL规则 http://localhost/Thingworx/Things/[Things名称]/Services/[Service名称]?method=POST&A ...

  5. java web 初尝遇到的坑

    1. 配置 tomcat 7 + Dynamic web model version 3 发现写 web.xml 导致 tomcat 不能启动. 解决办法:tomcat 7 之后有两种配置 servl ...

  6. HDU 2300 Crashing Robots

    Crashing Robots 题意 模拟多个机器人在四个方向的移动,检测crash robot, crash wall, OK这些状态 这是个模拟题需要注意几点: 理解转变方向后移动多少米,和转动方 ...

  7. (1)安装----anaconda3下配置pyspark【单机】

    1.确保已经安装jdk和anaconda3.[我安装的jdk为1.8,anaconda的python为3.6] 2.安装spark,到官网 http://spark.apache.org/downlo ...

  8. koa,express,node 通用方法连接MySQL

    这个教程不管node,express,koa都可以用下面方法连接,这里用koa做个参考 这个教程的源码地址: https://github.com/xiaqijian/... 新建文件目录,我是这样子 ...

  9. selenium chrome.options禁止加载图片和js

    #新建一个选项卡 from selenium import webdriver options = webdriver.ChromeOptions() #禁止加载图片 prefs = { 'profi ...

  10. js 如何判断浏览器是否禁用cookie

    语法:navigator.cookieEnabled: 如果浏览器启用了cookie,该属性值为true.如果禁用了cookie,则值为false. navigator: JavaScript中的一个 ...