专栏首页lzj_learn_note前端开发学习──初识Html

前端开发学习──初识Html

html结构

html 超文本标记语言,它的结构标准如下:

<!DOCTYPE html>  声明文档类型
<html lang="en">  根标签
<head> 头标签
    <meta charset="UTF-8">
    <title>Document</title> 标题标签
</head>
<body>  主体标签

</body>
</html>

html标签

  • 单标签
  • 注释标签
  • 水平线标签 <hr>
  • 换行标签 <br>
  • 双标签
  • 段落标签 <p>文本内容</p>,特点:上下自动生成空白行,而<br>标签换行不会生成空白行
  • 标题标签,h1-h6 取值到h6,建议h1标签在一个页面里只能出现一次
  • 文本标签 <font>文本内容</font>
  • 文本格式化标签: 1.文本加粗标签 <strong></strong><b></b> ,前者更具语义化 2.文本倾斜标签<em></em><i></i> ,前者更具语义化 3.删除线标签<del></del><s></s> ,前者更具语义化 4.下划线标签<ins></ins><u></u> ,前者更具语义化
  • 图片标签: <img src="" alt="" title="" width="" height="">
  • src:图片来源,必写
  • alt:替换文本,当图片不显示的时显示的文字
  • title:提示文本,当鼠标放到图片上时显示的文字
  • width:图片宽度
  • height:图片高度 注:图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放
  • 超链接标签:<a href="" title="" target=""></a>
  • href:跳转的路径,必写
  • title:提示文本,当鼠标放到链接上时显示的文字
  • target:_self为默认值,在自身页面打开(关闭自身页面,打开链接页面);_blank打开新页面 (自身页面不关闭,打开一个新的链接页面)
  • 无序列表
<ul type="square">
        <li>d</li> 
        <li>a</li>
        <li>c</li>
        <li>e</li>
</ul>

type:disc默认 实心小圆圈;square 小方块;circle 空心小圆圈

  • 有序列表
<ol type="i" start="2">
        <li>e</li>
        <li>re</li>
        <li>a</li>
        <li>f</li>
</ol>
  • type:type=”1,a,A,i,I” type的值可以为1,a,A,i,I
  • start:start=”2” 决定了开始的位置
  • 自定义列表
<dl>
        <!-- 小标题 -->
        <dt>帮助中心</dt>
        <!-- 解释标题 -->
        <dd>购物指南</dd>
        <dd>订单操作</dd>
        <dd>账户管理</dd>   
        
        <dt>帮助中心1</dt>
        <dd>购物指南2</dd>
        <dd>订单操作3</dd>
        <dd>账户管理4</dd>  
</dl>
  • meta标签:content 属性始终要和 name 属性或 http-equiv 属性一起使用。
  • 搜索关键字,某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类 <meta name="keywords" content="html">
  • 网页描述 <meta name="description" content="html">
  • 网页重定向:5s后跳转到www.baidu.com <meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
  • link标签
  • 链接外部样式表 <link rel="stylesheet" href="1.css">
  • 设置icon图片 <link rel="icon" href="1.png">

表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

<!-- 4行3列表格 -->
    <table border="4" width="300" height="400" cellspacing="2" cellpadding="10" 
    align="center" bgcolor="yellow" bordercolor="red">
    <caption>标题</caption>
    <!-- 行 -->
        <tr align="left" >
        <!-- 列 -->
            <td align="right">1</td>
            <td valign="bottom">2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
    </table>
  • table属性: Border=”4” 边框 Width=”300” 宽度 Height=”400” 高 cellspacing=”2” 单元格与单元格的距离 cellpadding=”10” 内容距边框的距离 align=”left | right | center” 如果直接给表格用align=”center” 表格居中,如果给tr或者td使用 ,tr或者td内容居中 bgcolor=”yellow” 背景颜色 bordercolor="red" 边框颜色
  • 表头 <caption>标题</caption>
  • 单元格合并:colspan=”2” 合并同一行上的单元格;rowspan=”2” 合并同一列上的单元格
  • 内容垂直对齐方式valign="top | middle | bottom"
<!-- 4行3列表格 -->
    <table border="4" width="300" height="400" cellspacing="2" cellpadding="10" 
    align="center" bgcolor="yellow" bordercolor="red">
    <caption>标题</caption>
    <!-- 行 -->
        <tr align="left" >
        <!-- 列 -->
            <td align="right">1</td>
            <td valign="bottom">2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td colspan="2" valign="top">7</td>
            <!-- <td>8</td> -->
            <td rowspan="2">9</td>
        </tr>
        <tr>
            <td>10</td>
            <td>11</td>
            <!-- <td>12</td> -->
        </tr>
    </table>

表单

  • 表单域 <form action="form.php" method="get"></form>
    • action :表单提交的目标地址。
  • method :POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的;GET通过地址栏提供(传输)信息,可见,安全性差
  • 输入框
<form action="form.php" method="get">
        <!-- 文本输入框 -->
        用户名:
        <input type="text" maxlength="6" readonly="readonly" disabled="disabled" name="username" value="html">
        <br>
        <!-- 密码输入框 -->
        密码:
        <input type="password" name="pwd">
    </form>
  • maxlength="6" 限制输入字符长度
  • readonly=”readonly” 将输入框设置为只读状态(不能编辑)
  • disabled="disabled" 输入框未激活状态
  • name="username" 输入框的名称
  • value="html" 将输入框的内容传给处理文件
  • 单选框
<input type="radio" name="gender" checked="checked"> 男
<input type="radio" name="gender" > 女
  • 只有将name的值设置相同的时候,才能实现单选效果。
  • checked=”checked” 设置默认选择项
  • 多选框
<input type="checkbox" checked="checked"> 1
<input type="checkbox" > 2
<input type="checkbox" > 3
  • 下拉列表
<select >
            <optgroup label="水果">
                <option >苹果</option>
                <option >香蕉</option>
            </optgroup>
            <optgroup label="电器">
                <option >电脑</option>
                <option selected="selected">冰箱</option>
            </optgroup>
</select>
<select multiple="multiple">
            <optgroup label="水果">
                <option >苹果</option>
                <option selected="selected">香蕉</option>
            </optgroup>
            <optgroup label="电器">
                <option >电脑</option>
                <option >冰箱</option>
            </optgroup>
</select>
  • Multiple=”multiple” 将下拉列表设置为多选项
  • Selected=”selected” 设置默认选中项目
  • <optgroup></optgroup> 对下拉列表进行分组, label=“” 分组名称
  • 多行文本框 <textarea cols="30" rows="10"></textarea>
  • Cols 控制输入字符的长度。
  • Rows 控制输入的行数
  • 文件上传 <input type="file">
  • 重置按钮 <input type="reset">
  • 文件提交按钮
  • <input type="submit"> ,可以实现信息提交功能
  • <input type="button" value="普通提交">,不能提交信息,配合JS使用
  • <input type="image" src="1.png">,图片按钮可实现信息提交功能
  • 表单信息分组
<form action="1.php" method="get">
        <fieldset>
            <legend>分组1</legend>
            <input type="text">
        </fieldset>
        <fieldset>
            <legend>分组2</legend>
            <select >
            <optgroup label="水果">
                <option >苹果</option>
                <option >香蕉</option>
            </optgroup>
            <optgroup label="电器">
                <option >电脑</option>
                <option selected="selected">冰箱</option>
            </optgroup>
        </select>
        </fieldset>
</form>

示意图

  • <fieldset></fieldset> 对表单信息分组
  • <legend></legend> 表单信息分组名称
  • 其他表单控件
<form action="1.php" method="get">
        <!-- 网址控件 -->
        <input type="url">
        <br>
        <br>
        <!-- 日期控件 -->
        <input type="date">
        <br>
        <br>
        <!-- 时间控件 -->
        <input type="time">
        <br>
        <br>
        <!-- 邮件控件 -->
        <input type="email">
        <br>
        <br>
        <!-- 数字控件 -->
        <input type="number" step="5">
        <br>
        <br>
        <!-- 滑块控件 -->
        <input type="range" >
</form>

html特殊字符

特殊字符

标签语义化

好的语义化的网站标准就是去掉样式表文件之后,结构依然很清晰。

  • 标签语义化意义:
  • 网页结构合理
  • 有利于seo:和搜索引擎建立良好沟通,有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取
  • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)
  • 便于团队开发和维护
  • 尽可能少的使用无语义的标签div和span;
  • 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
  • 不要使用纯样式标签,如:b、font、u等,改用css设置。
  • 需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 8-函数类型详解

    在python中函数(function)或方法(method)的参数类型有哪些,每种参数类型要怎么传参才能调用,默认参数要怎么设置才算合理。在python有一个...

    用户3106371
  • 自定义无限循环ViewPager(二)――ViewPager滑动原理解析

    在前面一篇文章中,已经分析了ViewPager初始化的原理,而本篇文章开始分析ViewPager的滑动及页面切换的原理。在阅读本文之前,大家可以先去了解下Scr...

    用户3106371
  • Volley源码分析学习

    2)根据SDK版本来创建HttpStack的实现,如果是2.3以上的,则使用基于HttpUrlConnection实现的HurlStack,反之,则利用Http...

    用户3106371
  • 《HTML5实战》Lesson03

    Week03     2016/09/28上午1-4节 一、复习上节课内容: 二、自己完成登陆明细部分P43:代码清单2-3 1,<fieldset>、<leg...

    用户1733354
  • <col>标签

    <col> 标签定义表格中一个或多个列的属性值。通常在<colgroup>元素内。

    Html5知典
  • JS示例24-隔行换色(表格)

    专注APP开发
  • vim的寄存器动作真是太酷了

    zhaoolee
  • Geth GraphQL使用说明

    Geth V1.9.x增加了GraphQL的支持,开发者可以在经典的JSON RPC API和GraphQL API之间根据自己的去中心化应用具体需求进行选择。...

    用户1408045
  • jquery 自己编写插件2

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...

    用户5760343
  • React 中合并单元格的正确写法

    用表格进行页面布局,页面布局在各种浏览器的的兼容性, 都非常好, 而在react中使用表格布局, 合并单元格的写法比较特殊, 博主查了很久才找到正确的写法, 在...

    zhaoolee

扫码关注云+社区

领取腾讯云代金券