前端开发学习──初识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 条评论
登录 后参与评论

相关文章

来自专栏V站

自适应丨Html5响应式(自适应)网页设计

viewport是网页默认的宽度和高度, 上面这行代码的意思是:网页宽度默认等于屏幕宽度(width=device-width), 原始缩放比例(initia...

5875
来自专栏偏前端工程师的驿站

CSS魔法堂:稍稍深入伪类选择器

 过去零零星星地了解和使用:link、::after和content等伪类、伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分...

1392
来自专栏大数据钻研

初识HTML之基础篇

前端认知 ---- 一、公司开发流程 1、 产品需求(产品经理给需求文档) 2、项目设计(视觉设计师给PSD文件,交互设计师配合) 3、前端开发 ...

3224
来自专栏CaiRui

Html再学

1.  Html是网页的载体。内容就是网页制作者放在页面上想要用户浏览的信息,可以包括文字、图片、视频等。 2.  CSS样式是展现。就像网页的外衣。比如,标题...

2866
来自专栏小轻论坛

平面设计师必备的AI快捷键

在开多个AI文档的情况下。来回切换是有点麻烦的,点来点去有点慢 CTRL+F6,可以来回切换。

3372
来自专栏Coding01

推荐一款快速生成海报的微信小插件

现在很多小程序都有生成海报,分享海报的功能。我们自己的几个小程序 (如:爸妈搜商城、爸妈搜云课堂、幼师大学、跟着外教学英语等) 也都有生成海报的功能。因此技术团...

1182
来自专栏从零开始学 Web 前端

从零开始学 Web 之 HTML(三)表单

table>tr3>td5 + tab键  <!-- 建立3行5列的表格 -->

3753
来自专栏极客生活

数据分析Excel之常用快捷键

下面是mac下常用的的excel快捷键,其中Cmd在windows下对应Ctrl键

941
来自专栏三木的博客

HTML概要

HTML CSS Javascript 的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。 CSS...

3209
来自专栏python3

body标签中相关标签

字体标签包含:h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>

1711

扫码关注云+社区

领取腾讯云代金券