web basic01

html文档类型

<!DOCTYPE>的声明

这样的声明可以帮助浏览器正确的显示网页

html版本

<head>元素:

以下标签都可以添加到head元素中:

<title> <link> <style> <stript><meta>

<meta>元素的常用属性:

content,http-equiv,charset

文本处理:

文本元素,标题,段落,列表,分区,元素显示方式,行内元素

<!-- 将文档声明为HTML5版本 -->
<!doctype html>
<!-- html是唯一的根元素 -->
<html>
	<head>
		<!-- 设置标题、编码、引入的资源 -->
		<!-- 设置文档标题 -->
		<title>我的第一个网页</title>
		<!-- 设置编码 -->
		<meta charset="utf-8"/>
	</head>
	<body>
		<!-- 文档呈现的内容 -->
		Hello, HTML.
	</body>
</html>

  文本处理:

<!doctype html>
<html>
	<head>
	    <title>文本处理</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<!-- 标题 -->
		<h1>达内Java班</h1>
		<h2>JSD1507</h2>
		<h3>讲师:李洪鹤</h3>
		<h3>学员:115人</h3>
		<h2>JSD1508</h2>
		<h3>讲师:范传奇</h3>
		<h3>学员:100人</h3>

		<!-- 段落 -->
		Hello. Hello. Hello.
		<p>Hello.</p><p>Hello.</p><p>Hello.</p>

        <!-- 有序列表 -->
        <ol>
          <li>浙江省</li>
          <li>江苏省</li>
          <li>山东省</li>
        </ol>

        <!-- 无序列表 -->
        <ul>
          <li>杭州市</li>
          <li>宁波市</li>
          <li>温州市</li>
        </ul>

        <!-- 列表嵌套,有序列表和无序列表
                      可以随意嵌套。 -->
        <ol>
          <li>
                        浙江省
           <ul>
            <li>杭州市</li>
            <li>宁波市</li>
            <li>温州市</li>
           </ul>
          </li>
          <li>
                        江苏省
           <ul>
            <li>南京</li>
            <li>苏州</li>
            <li>无锡</li>
           </ul>
          </li>
          <li>
                        山东省
           <ul>
            <li>济南</li>
            <li>烟台</li>
            <li>潍坊</li>
           </ul>
          </li>
        </ol>

    </body>
</html>

  div分区元素:

<!doctype html>
<html>
  <head>
    <title>div分区元素</title>
    <meta charset="utf-8"/>
  </head>
  <body>
    <!-- logo/工具 -->
    <div style="border:1px solid red;">
      <h1>这里放置logo和按钮</h1>
    </div>
    <!-- 内容 -->
    <div style="border:1px solid red;">
      <p>Hello.</p>
      <p>How are you.</p>
      <p>I‘m fine, thank you.</p>
      <p>And you?</p>
    </div>
    <!-- 版权标识 -->
    <div style="border:1px solid red;">
      <p>达内出品,盗版必究.</p>
    </div>
  </body>
</html>

  行内元素:

<!doctype html>
<html>
  <head>
    <title>行内元素</title>
    <meta charset="utf-8"/>
  </head>
  <body>
    <!-- span,用来修饰一段文字中的某几个字 -->
    <p>
          北京市海淀区北三环西路甲18号<span style="color:red;">中鼎大厦</span>B7
    </p>
    <!-- i/em,用来让文字倾斜 -->
    <p>
          北京市<i>海淀区</i>北三环西路<em>甲18号</em>中鼎大厦B7
    </p>
    <!-- b/strong,用来让文字加粗 -->
    <p>
      <b>北京市</b>海淀区北三环西路甲18号<strong>中鼎大厦</strong>B7
    </p>
    <!-- del/u,用来给文字增加删除线、下划线 -->
    <p>
          北京市海淀区<del>北三环</del>西路甲18号<u>中鼎大厦</u>B7
    </p>
    <!-- 演示空格折叠,默认情况下,一段文字内
        包含多个空格/tab/换行,都当做一个空格来对待 -->
    <p>
          北京市   海淀区     北三环西路甲18号

          中鼎大厦B7
    </p>
    <!-- <br>=换行, =空格 -->
    <p>
          北京市    海淀区北三环西路甲18号<br>中鼎大厦B7
    </p>

  </body>
</html>

  

图片和超链接:

<!doctype html>
<html>
  <head>
    <title>图片和超链接</title>
    <meta charset="utf-8"/>
  </head>
  <body>
    <!-- 增加超链接,链接到底部的锚点 -->
    <p><a href="#bottom">去底部</a></p>

    <!-- 图片,src属性用来设置图片存储的位置 -->
    <img src="../images/pig.png"/>
    <!-- 超链接,href属性用来设置链接的目标,
      target属性用来设置打开目标的方式。 -->
    <p>
      <a href="http://www.tmooc.cn" target="_blank">TMOOC</a>
    </p>
    <p>
      <a href="demo1.html" target="_self">DEMO1</a>
    </p>

    <!-- 随意增加一些内容,为了出现滚动条 -->
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>
    <p>Hello.</p>

    <!-- 增加锚点 -->
    <a name="bottom">底部</a>

    <!-- 增加超链接,链接到顶部,顶部不必设置
            锚点,因为默认的锚点就是顶部 -->
    <a href="#">TOP</a>

  </body>
</html>

  表格:

<!doctype html>
<html>
  <head>
    <title>表格</title>
    <meta charset="utf-8"/>
  </head>
  <body>
    <!-- 创建一个表格,2行2列 -->
    <table border="1px" width="100px">
      <!-- 第1行 -->
      <tr>
        <!-- 第1列 -->
        <td>aaa</td>
        <!-- 第2列 -->
        <td>bbb</td>
      </tr>
      <!-- 第2行 -->
      <tr>
        <!-- 第1列 -->
        <td>ccc</td>
        <!-- 第2列 -->
        <td>ddd</td>
      </tr>
    </table>

    <!-- 第2个table,演示跨行 -->
    <table border="1px" width="100px">
      <!-- 第1行 -->
      <tr>
        <!-- 第1列 -->
        <td rowspan="2">aaa</td>
        <!-- 第2列 -->
        <td>bbb</td>
      </tr>
      <!-- 第2行 -->
      <tr>
        <!-- 第1列 -->
        <!-- 由于aaa要跨行,占据ccc的位置,
                  所以需要先将ccc删除,释放这个位置。 -->
        <!-- <td>ccc</td> -->
        <!-- 第2列 -->
        <td>ddd</td>
      </tr>
    </table>    

    <!-- 第3个table,演示跨列 -->
    <table border="1px" width="100px">
      <!-- 第1行 -->
      <tr>
        <!-- 第1列 -->
        <td colspan="2">aaa</td>
        <!-- 第2列 -->
        <!-- 由于aaa要跨列,占据bbb的位置,
                  所以先把bbb删除,释放其位置。 -->
        <!-- <td>bbb</td> -->
      </tr>
      <!-- 第2行 -->
      <tr>
        <!-- 第1列 -->
        <td>ccc</td>
        <!-- 第2列 -->
        <td>ddd</td>
      </tr>
    </table>    

  </body>
</html>

  

时间: 2024-11-03 02:13:02

web basic01的相关文章

使用 IDEA 创建 Maven Web 项目 (异常)- Disconnected from the target VM, address: &#39;127.0.0.1:59770&#39;, transport: &#39;socket&#39;

运行环境: JDK 版本:1.8 Maven 版本:apache-maven-3.3.3 IDEA 版本:14 maven-jetty-plugin 配置: <plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <configuration> <webAppSourceDirectory>${pro

使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取

本文标签: WebScraper Chrome浏览器插件 网页数据的爬取 使用Chrome 浏览器插件 Web Scraper 可以轻松实现网页数据的爬取,不写代码,鼠标操作,点哪爬哪,还不用考虑爬虫中的登陆.验证码.异步加载等复杂问题. Web Scraper插件 Web Scraper 官网中的简介: Web Scraper Extension (Free!)Using our extension you can create a plan (sitemap) how a web site

shiro实现APP、web统一登录认证和权限管理

先说下背景,项目包含一个管理系统(web)和门户网站(web),还有一个手机APP(包括Android和IOS),三个系统共用一个后端,在后端使用shiro进行登录认证和权限控制.好的,那么问题来了web和APP都可以用shiro认证吗?两者有什么区别?如果可以,解决方案是什么?看着大家焦急的小眼神,接下来挨个解决上面的问题. web和APP可以用shiro统一登录认证吗? 可以.假如web和APP都使用密码登录的话,那没的说肯定是可以的,因为对于shiro(在此不会介绍shiro详细知识,只介

ASP.NET Web API相关

接收移动端上传的图片,示例代码: [HttpPost] [ApiSecurityFilter] public IHttpActionResult UploadImg() { string imgs = ""; try { System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; foreach (string key in files.AllKeys) { System.Web

WEB页面,WEB环境版本,数据库,整站备份脚本

#!/bin/bash # #WEB页面,WEB环境版本,数据库,整站备份脚本 #当发生某个原因导致整个服务器无法恢复时,利用上面备份的相关数据即可重做一台一样的服务器 date_a=`date +%Y%m%d-%H%M%S` mkdir -p /web_bak/${date_a}/conf &> /dev/null mkdir -p /web_bak/${date_a}/web &> /dev/null mkdir -p /web_bak/${date_a}/mysql &a

web新特性 之 WebSocket

详情参见:你真的了解WebSocket吗?     WebSocket系列教程   HTML5新特性之WebSocket WebSocket协议是基于TCP的一种新的协议.WebSocket最初在HTML5规范中被引用为TCP连接,作为基于TCP的套接字API的占位符.它实现了浏览器与服务器全双工(full-duplex)通信.其本质是保持TCP连接,在浏览器和服务端通过Socket进行通信. 服务端与客户端的连接不断开,实现全双工的操作.及服务端或是客户端都会给对方发送消息. WebSocke

配置resin web方式部署项目

写在前面,推荐下载resin4.0.47版本.其它版本没有测试 最近打算做一个小项目,然后容器选用了resin.想通过web提交war文件的方式 进行部署,更新代码也方便. 试了resin最新的版本(目前最新版本为4.0.53),提交war文件到webapps下面都是.tmp文件.百度google一通还是没找到解决办法. 看了下公司用的resin版本,选择4.0.47.下载后发现没最新版本的上传问题. 通过web提交war文件方式步骤如下: 步骤一:修改resin.properties.推荐配置

使用ansible快速部署一个主流的Web架构

拓扑: 拓扑说明: 两台服务器配置Keepalived+Nginx做双主模型的Load Balance,主机名为lb1和lb2 两台服务器配置lamp,用于处理动态资源请求,主机名为lamp1和lamp2 两台服务器配置varnish作为静态资源缓存服务器,主机名为varnish1和varnish2 两台服务器配置Nginx用于处理静态资源请求 额外需要一台服务器安装ansible,使用ansible批量管理所有服务器 关键技术点: 1. Keepalived配置了邮件报警脚本,当节点的状态发生

web网站升级备份脚本

#!/bin/bash # 一般web页面升级都是直接替换根目录下的对应文件,因此升级前备份对应的目录或者文件即可 web=/var/www/html #web根目录 dd="/data /admin /ps /css /bbs*" #web根目录下要备份的目录与文件,把要备份的目录或者文件,写入这个变量,可以使用*通配符. mkdir -p /web_bak &> /dev/null #创建备份所在的目录 for dd in $dd;do #列表循环 date_bak=