HTML简单入门

— 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>
posted @ 2018-04-03 01:07  阿婆土豆  阅读(375)  评论(0)  编辑  收藏  举报