您的位置：首页 > Web前端

前端学习：HTML基本知识

2018-02-07 21:20 573 查看

HTML笔记

一套规则,浏览器认识的规则，常用20个标签
开发者：
学习html规则
开发后台程序：
- 写html文件（充当模板）
- 数据库中获取数据，替换html文件指定位置（web框架）
本地测试
- 浏览器直接打开
- pycharm服务器
编写htnl文件
- doctype 对应关系
- htnl标签，标签内部可以写属性 ,只能有一个
- 注释`<!---->`
标签分类
- 自闭合标签`<meta>`
- 主动闭合标签` <title></title>`
head标签
- meta标签 编码，跳转，刷新，关键字，描述，ie兼容
` <meta http-equiv="x-ua-compatible" content="IE=IE9;IE=IE8;IE=IE7">`优先由高版本打开
- title 标题
- link  图标
- style
- script
body标签
- 特殊符号   空格 ` `   大于号` > ` 小于号` <`
- 参考：http://tool.oschina.net/commons?type=2
- p标签：段落   br标签：换行推荐写法：`<br />`
- h1-h6
标签总结：
- 块级标签（占满一行） h(加大加粗),p（段落之间有间距）,div（白板）
- 行内标签（内联标签，沾满内容）span（白板）
标签之间可以嵌套
标签存在的意义，css操作，js操作
浏览器的审查元素
- 定位
- 查看样式
input标签
type
text 文本  name  value
password 密码  name value
submit 提交  value
button 按钮 value
radio  单选框 name(相同则互斥)  value  默认选中checked="checked"
checkbox 复选框  name 批量获取数据 value 默认选中
file 文件  依赖于：form属性 enctype="multipart/form-data"
reset 重置
textarea 多行文本
select 下拉框
- selected默认选中
- size 选中个数
- multiple 多选
- optgroup 分组显示
a标签
- 跳转
- 锚点 href="#标签id"  标签id不允许重复
img标签
- src图片地址  alt图片失效文字  title提示文字
列表
- 无序列表ul  li
- 有序列表ol  li
- 定义列表dl  dt dd
表格table
- 表头thead tr  th
- 表体tbody tr  td
合并列 colspan
合并行 rowspan
label标签
-与input配合使用，点击文字，使得关联标签获得光标
fieldset  字段框  legend 标题


代码实例

头部示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<meta http-equiv="refresh" content="3">  3秒定时刷新-->
<!--<meta http-equiv="refresh" content="3, http://www.baidu.com">  3秒后自动跳转到新页面-->
<meta name="keywords" content="关键字1,关键字2">
<meta name="description" content="描述信息">
<!--<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"> 兼容ie，以ie7模式打开-->
<title>Title</title>
</head>
<body>
<h1>hello world<h1>
<h1>time:{{time}}</h1>  <!--这里的{{time}}会在服务器端被替换掉-->
</body>
</html>


输入框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input</title>
</head>
<body>
<form action="" enctype="multipart/form-data">
<div>
<fieldset>
<legend>输入信息</legend>
<p>输入框：</p>
<label for="user">用户名：</label> <!--点击label光标定位到input-->
<input id="user" type="text" name="username" >

<p>密码框：</p>
<label for="passwd">密码：</label><input id="passwd" type="password" name="pwd" >
</fieldset>
<p>性别（单选框）：</p>
男：<input type="radio" name="gender" value="man" checked="checked">
女：<input type="radio" name="gender" value="woman">

<p>爱好（复选框）：</p>
篮球：<input type="checkbox" name="hobby" value="Basketball" checked="checked">
足球：<input type="checkbox" name="hobby" value="Football">

<p>上传文件</p>
<input type="file" name="filename">

<p>多行文本输入</p>
<textarea name="text">默认值</textarea>

<p>下拉框</p>
默认显示
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
默认选中
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou" selected="selected">广州</option>
</select>
显示个数
<select name="city" size="3">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou" selected="selected">广州</option>
</select>
多行选择
<select name="city" size="3" multiple="multiple">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou" selected="selected">广州</option>
</select>
分组显示
<select name="city">
<optgroup label="北方">
<option value="beijing">北京<
ed92
;/option>
<option value="shanghai">上海</option>
</optgroup>
<optgroup label="南方">
<option value="guangzhou" selected="selected">广州</option>
<option value="shenzheng" selected="selected">深圳</option>
</optgroup>
</select>
</div>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>


显示效果：



a标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>

<p id="i1" style="height:600px;">第一章</p>
<p id="i2" style="height:600px;">第二章</p>
<p id="i3" style="height:600px;">第三章</p>
<p id="i4" style="height:600px;">第四章</p>
</body>
</html>


百度接口

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--https://www.baidu.com/s?wd=知道-->
<form action="https://www.baidu.com/s">
<input type="text" name="wd" value="默认值">
<input type="submit" value="搜索">
</form>
</body>
</html>


img图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<a href="#"><img src="img/sun.jpg" alt="图片不存在显示文字" title="鼠标经过提示文字"
style="height:500px;width:500px"></a>
</body>
</html>


列表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>无序列表</p>
<ul>
<li>项目</li>
<li>项目</li>
<li>项目</li>
</ul>
<p>有序列表</p>
<ol>
<li>项目</li>
<li>项目</li>
<li>项目</li>
</ol>
<p>定义列表</p>
<dl>
<dt>标题</dt>
<dd>描述</dd>
<dd>描述</dd>
<dt>标题</dt>
<dd>描述</dd>
<dd>描述</dd>
</dl>
</body>
</html>


显示效果



登陆

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<form action="/" method="post">
<!--get请求头发送内容，post请求体发送内容-->
<input type="text" name="username">
<input type="password" name="pwd">
<input type="button" value="按钮">
<input type="submit" value="提交表单">
<!--字典{"username": "xxx", "pwd": "xxx"}-->
</form>
</body>
</html>


显示效果



表格

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>第二行，第一列</td>
<td>第二行，第二列</td>
<td>第二行，第三列</td>
</tr>
<tr>
<td rowspan="2">行合并</td>
<td>第二行，第二列</td>
<td>第二行，第三列</td>
</tr>
<tr>

<td colspan="2">列合并</td>
</tr>
</tbody>
</table>
</body>
</html>


显示效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航