HTML基础系列

达达前端

发布于 2019-07-03 14:23:31

7390

发布于 2019-07-03 14:23:31

文章被收录于专栏：达达前端

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 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度

HTML基础系列

HTML基础系列

结言

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐