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
li
定义列表
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">
选择状态 checked="checked"
文件选择框
<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="width=device-width, initial-scale=1">
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 条评论
下一页
