欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML简单入门

程序员文章站 2024-01-03 09:10:58
基本结构 标准文档： "www.w3.org" 属性: 1. 通用属性：id,class,style; 2. 特有属性：colspan,type,value... 标签： 1. html标题、段落、连接、图像、列表、div 2. section、article、footer、header 重点元素 ......

基本结构

标准文档：www.w3.org

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html document</title>
</head>
<body>
Hello imooc!
</body>
</html>
  • 属性:
  1. 通用属性：id,class,style;
  2. 特有属性：colspan,type,value...
  • 标签：
  1. html标题、段落、连接、图像、列表、div
  2. section、article、footer、header

HTML简单入门

重点元素

HTML标题Heading Contend

共6级

<h1>标题内容</h1>
<h2>标题内容</h2>
...
<h6>标题内容</h6>

HTML段落paragraph

划分段落，段落之间换行

<p>段落内容</p>

在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>

上一篇：

下一篇：

推荐阅读