Html
引言：学习前端基础知识。第一课 HTML。
时间：2017年11月19日
作者：JustDo23
html_css_js
01. 基础知识
- 入门
Web前端开发需掌握基础技术：HTML和CSS以及JavaScript三者功能区分为-
HTML是网页内容载体。 -
CSS是样式表现。 -
JavaScript是实现特效及交互。
-
-
HTML是用来描述网页的一种语言。-
Hyper Text Markup Language即超文本编辑语言 -
HTML它不是编程语言，而是一种标记语言 - 标记语言是一套标记标签
-
HTML使用标记标签来描述网页
-
-
语义化：明白每个标签的用途，合理使用标签。好处：
- 更容易被搜索引擎收录
- 更容易让屏幕阅读器读出网页内容
02. 文档结构
<!-- DTD 头 声明HTML版本 -->
<!DOCTYPE html>
<!-- HTML根标签 -->
<html>
<!-- 头标签 -->
<head>
</head>
<!-- 网页上显示的内容全部放在这里 -->
<body>
</body>
<!-- HTML结束标签 -->
</html>
03. 头部标签
<!-- 头标签 -->
<head>
<!-- 网站标题 -->
<title>前端入门</title>
<!-- 全局属性信息 -->
<meta charset="utf-8">
<!-- 链接外部文件 -->
<link rel="stylesheet" type="text/css" href="link.js">
<!-- CSS样式 -->
<style type="text/css"></style>
<!-- JavaScript代码 -->
<script type="text/javascript"></script>
</head>
04. 常用标签
<body>
<h1>一级标题</h1>
<p>一个段落。</p>
<p>
<em>表示强调，斜体显示。</em><br/>
<strong>表示更强烈强调，粗体显示。</strong><br/>
<span>标签没有语义，可用于设置单独样式。</span><br/>
<q cite="该引用出处">表示简短文本引用，引用默认会添加引号。</q>
<blockquote cite="http://">表示长文本引用，引用默认会添加左右添加缩进。</blockquote>
<address>表示地址等信息，默认斜体。</address>
<code>表示一行代码，仅一行代码。</code><br/>
<pre>表示大段代码等预格式化文本，保留空格和换行。</pre>
<hr/>
<a href="目标地址" target="-_blank" title="鼠标滑过显示的文本，增强语义化">链接显示的文本</a><br/>
<a href="mailto:JustDo_23@163.com?subject=mailto总结&body=各种参数使用方法">发送邮件。</a><br/>
<hr/>
<img src="图片地址" alt="图片显示失败时的替换文本" title="提示文本">
<hr/>
</p>
</body>
05. 列表标签
<body>
<ul>无序列表
<li>一个列表</li>
<li>无序排列</li>
<li>默认样式小圆点</li>
</ul>
<ol type="A">有序列表
<li>一个列表</li>
<li>按顺序排列</li>
<li>默认样式从1开始</li>
</ol>
</body>
html_list
06. 分块标签
<body>
<div class="divClass" id="divID">
独立容器，独立逻辑，区域划分
<ul type="circle">
<li>属性id指定唯一标识</li>
<li>属性class指定样式类名</li>
</ul>
</div>
</body>
07. 表格标签
<body>
<table summary="表格简介文本摘要，增强语义化" border="1" cellpadding="1" cellspacing="1">
<caption>表格标题</caption>
<thead>
</thead>
<tbody>
<tr>
<th>表头</th>
<th>粗体</th>
<th>居中</th>
<th colspan="2">跨列</th>
</tr>
<tr>
<th>竖直</th>
<td> </td>
<td>单元格</td>
<td rowspan="2">跨行</td>
<td>单元格</td>
</tr>
<tr>
<th>表头</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">页脚</th>
<td>单元格</td>
</tr>
</tfoot>
</table>
</body>
-
<table>定义表格 -
<caption>定义表格标题 -
<tr>定义表格的行 -
<td>定义表格单元 -
<th>定义表格的表头 -
<thead>定义表格的页眉 -
<tbody>定义表格的主体 -
<tfooter>定义表格的页脚 - 添加表格结构
<thead><tbody><tfooter>表格主体内容tbody下载完优先显示，分段显示，不必等待表格加载完成后才显示。 - 属性
border指定表格边框宽度 - 属性
cellpadding指定单元格内边距 - 属性
cellspacing指定表格单元格外边距 - 属性
colspan指定单元格跨行 - 属性
rowspan指定单元格跨列
html_table
08. 表单标签
<body>
<!-- 表单标签 -->
<form class="类名" action="指定提交位置" method="提交方式">
<label for="userName">账号：</label>
<!-- 文本输入框 -->
<input type="text" name="userName" value="账号默认值"><br>
<label for="passWord">密码：</label>
<!-- 密码输入框 -->
<input type="password" name="passWord" value="密码默认值"><br>
<!-- 文本域 -->
<textarea name="name" rows="文本域行数" cols="文本域列数">文本域名默认值</textarea><br>
<label>以下是单选框：</label><br>
<!-- value 用于向服务器提交 -->
<input type="radio" name="gender" value="man" checked="checked"><label>男</label><br>
<input type="radio" name="gender" value="woman"><label>女</label><br>
<label>注意：同一组单选框 name 取值一定要一致</label><br>
<label>以下是复选框：</label><br>
<!-- label 为鼠标用户改进可用性 for 属性与 id 属性相同 -->
<input type="checkbox" id="swim" name="swimming" value="swimming"><label for="swim">游泳</label><br>
<input type="checkbox" id="shop" name="shopping" value="shopping"><label for="shop">购物</label><br>
<label>以下是下拉列表框：</label><br>
<!-- multiple 属性指定单选或多选 -->
<select class="spinner" name="list" multiple="multiple">
<option value="book">读书</option>
<option value="film" selected="selected">电影</option>
<option value="sleep">睡觉</option>
</select>
<br>
<!-- 提交按钮 -->
<input type="submit" name="submitButton" value="提交"><br/>
<!-- 重置按钮 -->
<input type="reset" name="resetButton" value="重置"><br/>
</form>
</body>
html_form
09. 小结
- 标记语言相对而已容易学习，多次练习并在浏览器中运行。
- 认识标签，掌握标签，运用标签。
网友评论