基本知识"/>
前端学习：HTML基本知识
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标签- 特殊符号 空格 ` ` 大于号` > ` 小于号` <`- 参考：=2- p标签：段落 br标签：换行推荐写法：`<br />`- h1-h6标签总结：- 块级标签（占满一行） h(加大加粗),p（段落之间有间距）,div（白板）- 行内标签（内联标签，沾满内容）span（白板）标签之间可以嵌套标签存在的意义，css操作，js操作浏览器的审查元素- 定位- 查看样式
input标签typetext 文本 name valuepassword 密码 name valuesubmit 提交 valuebutton 按钮 valueradio 单选框 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, "> 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">北京</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>
<!--=知道--><form action=""><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>显示效果
更多推荐
前端学习：HTML基本知识
发布评论