— Java攻城狮学习路线 —

基本结构

标准文档:www.w3.org

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html document</title>
</head>
<body>
Hello imooc!
</body>
</html>
  • 属性:
  1. 通用属性:

  2. 特有属性:colspan,type,value...
  • 标签:
  1. html标题、段落、连接、图像、列表、div
  2. section、article、footer、header

重点元素

HTML标题Heading Contend

共6级

<h1>标题内容</h1>
<h2>标题内容</h2>
...
<h6>标题内容</h6>
<hr><!-- 水平线 -->

HTML段落paragraph

划分段落,段落之间换行

<p>段落内容</p>
<br><!-- 换行 -->

在head中利用style标签定义段落样式

<head>
...
<style>
p{
margin:0;
padding:0;
}
</style>
...
</head>

HTML字体font

格式化文本

<!-- size -->
<font size="3">文字内容</font>
<!-- face -->
<font face="Helvetica">文字内容</font>
<!-- color -->
<font color="red">文字内容</font>
<font color="#d8d8d8">文字内容</font>
<font color="rgb(168,178,188)">文字内容</font>
  1. 只能控制字体集、大小和颜色
  2. 别用!用CSS中的font属性更好

HTML链接

文档内部锚点、跳转到外部文档、下载资源

<!-- href=地址or="#..."跳转到id为...的地方-->
<!-- target="_blank"新窗口打开or="_self"本窗口打开-->
<a></a>
  1. 禁止跳转
  2. 去掉下划线
<head>
...
<style>
a{
<!-- 去掉下划线 -->
text-decoration: none;
<!-- 设置颜色 -->
color:#333333;
<!-- 光标属性 -->
cursor:none;
}
a:visited{
color:#333333;
}
</style>
...
</head>

HTML图像

插入图像

<!-- src = "图片地址"-->
<!-- alt = "用户提示"-->
<img />
  1. 支持格式:PNG/JPEG/GIF/PDF
  2. 非标签方式:background
<head>
<style>
.class-logo{
background: url("....");
width: 200px;
height: 80px;
}
</style>
</head>
<body>
<p class="class-logo"></p>
</body>

HTML列表

插入列表

<!-- 无序标签 -->
<ul>
<li></li>
<li></li>
</ul>
<!-- 有序标签 -->
<ol>
<li></li>
<li></li>
</ol>
<!-- 定义列表 -->
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
  1. 去除点;type属性管理符号样式(disc,circle,square)不建议使用
  2. 只用无序标签

HTML div

布局

<div></div>
<div></div>

非常常用且重要,现代布局都靠它

HTML块级元素与行内元素

  1. 块级元素:上下邻接,换行
  2. 行内元素:在一行邻接

HTML注释

1.行注释

<!-- 注释 -->

2.段落注释

<!-- 解释内容start -->
...
<!-- end -->

3.条件注释(只在IE10以下浏览器生效),兼容性检查

<!-- [if IE 8]>
<div>是ie8</div>
<![endif]-->

HTML常用带格式作用的标签

1.文本格式化(一般不使用)

<!-- 加粗字体 -->
<b></b>
<!-- 另一种粗体 -->
<strong></strong>
<!-- 强调字体 -->
<em></em>
<!-- 斜体 -->
<i></i>
<!-- 大号字体 -->
<big></big>
<!-- 小号字体 -->
<small></small>
<!-- 下标 -->
<sub></sub>
<!-- 上标 -->
<sup></sup>

2.预格式文本

<!-- 适合代码书写 -->
<pre></pre>

3.引用(不常用)

<!-- 文字引用 -->
<blockquote></blockquote>

4.删除线(兼容性不好)

<del></del>

HTML表格

布局,呈现需要表格布局内容

<!-- 表格头[可选] -->
<!-- 表格体[可选] -->
<!-- 表格行[必须] -->
<!-- 单元格[必须] -->
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!-- 完整体 -->
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<th></th>
<th></th>
</tr>
</tbody>
</table>
  1. 表格标签是块级元素
  2. 全局布局的作用退出舞台
  3. 专注于自己专注的布局领域
  4. 表格样式
<!-- 边框 -->
<table border="1">
</table>
<!-- 单元格间距 -->
<table cellspacing="0">
</table>
<!-- 内边距 -->
<table cellpadding="0">
</table>
<!-- 单元格跨列 -->
<table>
<tr>
<td colspan="2"></td>
</tr>
</table>
<!-- 单元格跨行 -->
<table>
<tr>
<td rowspan="2"></td>
</tr>
</table>
<!-- 内容对齐 -->
<table>
<tr align="center">
<td></td>
</tr>
</table>

HTML表单

收集用户输入的内容(文本、文件)

<form></form>
  • 表单元素

1.input

<form action="">
<!-- 文本 -->
<input type="text" maxlength="10" value="文本" />
<!-- 密码 -->
<input type="password" maxlength="10" value="密码">
<!-- 单选 -->
<input type="radio" name="radioname" value="0">
<input type="radio" name="radioname" value="1">
<!-- 多选 -->
<input type="checkbox" value="0" checked>
<input type="checkbox" value="1">
<input type="checkbox" value="2">
<!-- 按钮 -->
<input type="button" value="按钮">
<!-- 数字 -->
<input type="number">
<!-- 日期 -->
<input type="date">
<!-- 颜色 -->
<input type="color">
<!-- 范围 -->
<input type="range" min="10" max="50">
<!-- 邮件 -->
<input type="email">
<input type="submit">
<!-- URL -->
<input type="url">
<!-- 文件 -->
<input type="file" multiple="multiple">
</form>

2,select

<select name="" id="">
<option value="">1</option>
<option value="" selected>2</option>
<option value="">3</option>
</select>

3.textarea

<style>
textarea{
<!-- 取消可拓展能力 -->
resize:none;
}
</style>
<textarea rows="" cols="">一段文本</textarea>

4.button(type可设置为button,submit,reset)

<button type="" form=""></button>
  • 属性
<!-- action:提交到的服务器地址 -->
<!-- method:指定提交时用那种Http方法:POST/GET -->
<!-- name:标识 -->
<!-- autocomplete:浏览器是否可以自动填充 -->
<!-- enctype:指定表单内容编码 -->
<form name="test" enctype="UTF-8" action="http://baidu.com" method="GET">
</form>

HTML简单入门的更多相关文章

  1. 用IntelliJ IDEA创建Gradle项目简单入门

    Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...

  2. [原创]MYSQL的简单入门

    MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...

  3. Okio 1.9简单入门

    Okio 1.9简单入门 Okio库是由square公司开发的,补充了java.io和java.nio的不足,更加方便,快速的访问.存储和处理你的数据.而OkHttp的底层也使用该库作为支持. 该库极 ...

  4. emacs最简单入门,只要10分钟

    macs最简单入门,只要10分钟  windwiny @2013    无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...

  5. 【java开发系列】—— spring简单入门示例

    1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...

  6. Docker 简单入门

    Docker 简单入门 http://blog.csdn.net/samxx8/article/details/38946737

  7. Springmvc整合tiles框架简单入门示例(maven)

    Springmvc整合tiles框架简单入门示例(maven) 本教程基于Springmvc,spring mvc和maven怎么弄就不具体说了,这边就只简单说tiles框架的整合. 先贴上源码(免积 ...

  8. git简单入门

    git简单入门 标签(空格分隔): git git是作为程序员必备的技能.在这里就不去介绍版本控制和git产生的历史了. 首先看看常用的git命令: git init git add git comm ...

  9. 程序员,一起玩转GitHub版本控制,超简单入门教程 干货2

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注 ...

  10. Web---演示Servlet的相关类、表单多参数接收、文件上传简单入门

    说明: Servlet的其他相关类: ServletConfig – 代表Servlet的初始化配置参数. ServletContext – 代表整个Web项目. ServletRequest – 代 ...

随机推荐

  1. vue项目的路由配置

    方案一.在生成项目的时候就选择安装路由; 这个地方选择y即可; 生成项目之后在src目录下会有router文件夹,里面有index.js,并且里面已经存在一个helloWorld页面了,可以直接模仿着 ...

  2. 模拟Spring容器的getBean方法(Maven工程)

    Spring容器的getBean方法是通过反射机制实现的,下面的测试程序模拟getBean的实现原理. 步骤一:pom.xml文件配置解析XML文件的dom4j.jar 步骤二:XML文件中配置bea ...

  3. 转:Windows Phone 7 设计简介

    英文原文:smashingmagazine 导读:Windows Phone 7 引进了一个全新的内容管理和用户界面,命名为Metro的设计语言和理论.微软这次所看准的市场和用户群也与之前的老一代 W ...

  4. C++数组查重

    今天课上实验课,遇到一道题目,需要查找一个数组中出现次数最多的元素和次数,并且输出.第一次用struct模拟字典,十分麻烦而且复杂度是O(n*n).其实,运用转化的思想,可以先将其排序,然后再查找即可 ...

  5. go 语言优势

    一:为什么用Go来做抽奖系统 1.Go  vs PHP/JAVA ①:高并发,Go协程优于PHP多进程,JAVA多线程模式 ②:高并发,编译后的二进制优于PHP解释型,JAVA虚拟机 3:高效网络模型 ...

  6. 【[Offer收割]编程练习赛 14 B】投掷硬币

    [题目链接]:http://hihocoder.com/problemset/problem/1506 [题意] 中文题 [题解] 这种题是概率DP-. 设f[i][j]表示i个硬币里面有j个正面朝上 ...

  7. 清北学堂模拟赛d3t1 a

    [问题描述]你是能看到第一题的friends呢.——hja 怎么快速记单词呢?也许把单词分类再记单词是个不错的选择.何大爷给出了一种分单词的方法,何大爷认为两个单词是同一类的当这两个单词的各个字母的个 ...

  8. Sencha Touch 2.1 Chart属性中文解释

    图表的几大要素: 1.坐标:上.下.左.右. 坐标的类型,数字.分类... 坐标包含需要显示的坐标值,即绑定的字段 坐标值的样式,比如旋转.字体大小.格式 坐标的最大值.最小值.是否显示网格 坐标旁边 ...

  9. redis高可用,保证高并发

    目录 redis如何通过读写分离来承载读请求QPS超过10万+ redis replication以及master持久化对主从架构的安全意义 redis主从复制原理.断点续传.无磁盘化复制.过期key ...

  10. JAVA 大数据