HTML基础系列
HTML基础系列
image.png
HTML标记语言，网页制作的第一步。 什么是HTML呢？查百度 基础语法 常用标签
HTML是超文本标记语言，HTML不用编译，直接在浏览器中执行，HTML是一个文本文件。
HTML基本结构，标签，元素，属性，注解
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
</html>标签属性格式：
<标签名 属性名=“属性值”></标签名>文档类型声明：
<!DOCTYPE> 声明必须放在html文档第一行，不是html标签编码文件
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>标题标签，段落标签，预格式化标签，水平线
<h1></h1> <p> <pre></pre> <hr/>
<i></i>
<b></b>
<ins>
<del>
<sub>
<sup>无序列表：
<ul>
<li></li>
</ul>
disc 圆点
square 正方形
circle 空心圆有序列表:
<ol>
<li></li>
</ol><dl>
<dt>
<dd>
</dl>结构，表现，行为
图片标签
<img src="" alt=""/>相对路径，绝对路径
超链接标签：
<a href=""> 内容 </a>
href target title name
_self _blank _top _parent定义锚：
<a href="#锚名"></a>
<a name="锚名" ></a>邮件链接：
<a href="mailto:邮件地址"></a>下载：
<a href="xxx.rar"></a>表格的基本结构，操作表格，属性，跨行，嵌套
<table>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>添加标题
<caption></caption>加载过长，内容过多
表格分：表头，主体，脚注
thead tbody tfoot
<table>
<caption><caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>表格属性
width表格宽度，align对齐方式，border表格边框的宽度，Bgcolor表格背景颜色，cellpadding内容之间的空白，cellspacing单元格之间的空白，frame和rules。
跨列属性: colspan 跨行属性: rowspan
表格嵌套：
<table>
<tr>
<td></td>
<td>
<table>
<tr>
<td></td>
<td></td>
<tr>
</table>
</td>
</tr>
</table>表单结构，表单常用元素，表单交互属性
语法：文本域，单选框，复选框，按钮，列表
<form>
...
</form>
input
select
option
textarea
optgroup
<input type="" name=""/>
text password file checkbox radio button submit reset hidden image
name maxlength size value placeholder<input type="image" name="" src="imageurl" />
<input type="hidden" name="" value="" />
传输给服务器下拉菜单和列表标签
<select>
<option value=""></option>
<option value=""></option>
</select>
name multiple可以多选 size显示条目
<option>标签属性
selected value分组下拉菜单
<select name="">
<optgroup label="组1">
<option value=""></option>
</optgroup>
<optgroup label="组2">
<option value=""></option>
</optgroup>
</select>多行文本域
<textarea name="" rows="" cols="">
</textarea>
name placeholder rows cols<form action="" method="" name="" >
</form>
action method name target enctype网页结构：
<body>
// 头部
<div></div>
// 主体
<div></div>
// 页脚
<div></div>
</body>
<div>
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
</div>总结：
html表单，表单应用场景，表单工作原理
<input type="" name="" />
text password file checkbox radio button submit reset hidden image
<form>
<input type="text" name=""/>
</form>
name, maxlength, size, value, placeholder
<form>
<input type="password" name=""/>
</form>
<form>
<input type="file" name=""/>
</form>
<form>
<input type="radio" name="" value="" checked/>
</form>
<form>
<input type="checkbox" name="" value="" checked/>
</form>
<input type="button" name="" value=""/>
type="submit"
type="reset"
<input type="image" name="" src="imageurl"/>
<input type="hidden" name="" value=""/>
html表单
input select option optgroup textarea
<select>
<option value=""></option>
</select>
name multiple size
selected value
<textarea name="" rows="" cols="" >
</textarea>
name placeholder rows cols
<form action="" method="" name="">
</form>
action method name targer enctype
url get,post form_name _blank,_self,_parent,_top
text/plain
multipart/form-data
image.png
image.png
image.png
<!DOCTYPE html>
<html>
<head>
<!-- 网页头部内容 -->
<title>标题</title>
</head>
<body>
<!-- 网页主体内容 -->
</body>
</html>结言
好了，欢迎在留言区留言，与大家分享你的经验和心得。
感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
作者简介
达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。
感谢！承蒙关照！您真诚的赞赏是我前进的最大动力！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019.04.15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
