前端开发学习──初识Html
前端开发学习──初识Html
用户3106371
发布于 2018-09-12 10:16:27
发布于 2018-09-12 10:16:27
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）；
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.05.31 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读