HTML
2020-02-21 10:25:40 0 举报AI智能生成
登录查看完整内容
html入门教程
作者其他创作
大纲/内容
HTML
前言
定义网页的内容
CSS
定义网页的表现
JavaScript
定义网页的行为
简介
Hyper Text Markup Language
功能
在线发布文本、图片、列表、表单等
通过超链接访问在线资源
创建表单收集用户输入
包含多媒体
基础
标签和元素
内容
标签嵌套
属性
自封闭标签
<br />
<hr />
元素类型
块级元素
行内元素
基本框架
文档声明HTML 5
<!DOCTYPE html>
主体
<html lang=\"zh\"></html>
头部
<head></head>
正文
<body></body>
语义标题
<h1></h1>
h5等于普通文字，只是有加粗显示
<h6></h6>
段落
<p>...</p>
paragraph标签
换行
<br>
break标签
注释
<!--注释-->
空格
链接
标签 <a>
链接目标：href
绝对链接 http://
<a href=\"url\" target=\"_blank\">网易新闻</a>
新窗口
鼠标中键
<a href=\"url\" target=\"_self\">网易新闻</a>
当前窗口
<a href=\"资源名称.格式\">资源下载</a>
相对链接
平级目录
不写位置
下级目录
目录/
上级目录
../
/页面
根目录
邮件链接 mailto：
<a href=\"mailto:liqingju8096@gmail.com\">邮件链接</a>
锚点链接 #id
一个页面链接在一个页面里边
<a href=\"#\">返回页首</a>
<a href=\"#id\">返回位置标签</a>
文本格式化
<strong>
<b>
<em>
<i>
<small>
<ins>
<del>
<abbr>
<code>
图片
标签：<img>
源 src=\"\"
Source
替换文本 alt=\"\"
鼠标经过显示文字 title=\"\"
所有元素可用
尺寸 width/height=\"\"
图片占位符
temp.im
<img src=\"http://temp.im/200x200 alt=\"\">
lorempixel.com
表格 <table>
边框 border
\"1\"和\"0\"有和无
<table border=\"1\">
内间距 cellpading
内容到边框的距离
cellpadding=\"5\"
单元格间距 cellspacing
单元格之间的距离
cellspacing=\"5\"
表头行 thead
表体 tbody
行 tr
单元格表头th
单元格 td
rowspan 跨行
colspan 跨列
<td colspan='3'></td>
列表
无序列表
ul
Unordered list
li
List
有序列表
ol
Ordered list
定义列表
dl
Definition list
标题 dt
描述 dd
表单
功能：收集用户输入或选择的信息
标签： Form
提交行为地址 action
#或默认为空
/reg/
方法 method
get(默认）
post
输入元素
文本标签
<label for=\"\"></label>
for=“”跟谁一组
文本字段
<input type=\"text\" id=\"\" name=\"\">
密码框
<input type=\"password\">
单选按钮
<input type=\"radio\">
选择状态 checked=\"checked\"
<input type=\"radio\" name=\"sex\" id=\"male\"><label for=\"male\">男</label>
<input type=\"radio\" name=\"sex\" id=\"female\"><label for=\"female\">女</label>
复选框
<input type=\"checkbox\">
文件选择框
<input type=\"file\">
文本区域
<textarea>
列数： cols
行数： rows
选择框（下拉列表）
<select>
选项
<option>
值：value
选择状态 selected=\"selected\"
按钮
提交
<input type=\"submit\" value=\"提交\">
重置
<input type=\"reset\" value=\"重置\">
<input type=\"button\" value=\"\">
高级
文档类型声明
html5: <!DOCTYPE html>
html4:<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN \"http://www.w3.org/TR/html4/strict.dtd\">
...
标题 <title>
根地址 <base href=\"url\">
网站的根域名
链接 <link href=\"url\" rel=\"stylesheet\">
样式块 <style></style>
脚本块 <script>
src=\"**.js\"
type=\"text/javascript\"
h5省略
元数据 <meta>
charset=\"utf-8\"
<meta name=\"keywords\" content=\"优品课堂，HTML\">
<meta name=\"description\" content=\"优品课堂，HTML\">
<meta name=\"viewpor\" content=\
Emmet（插件）
Ctrl+E
成对出现
html:5+Ctrl+E
生成html标准文档
lorem+Ctrl+E/Tab
自动生成一个段落
p*20>lorem+Ctrl+E
生成20个段落
p>b>+Ctrl+E
生成两对标签
Ctrl+/
tr*2>td*3+Ctrl+E
创建两行三列表格
0 条评论
回复 删除
下一页
