首页 > 代码库 > 【html】结构、术语、标签
【html】结构、术语、标签
网页样式与布局
1.对网页结构进行认知，掌握通过切片工具进行结构的划分
<html>
<head>
<title>文档标题</title>
</head>
<body>
<header>头部</header>
<div class="banner">广告栏</div>
<div class="sidebar">侧边栏</div>
<div class="main">主要内容</div>
<footer>尾部</footer>
</body>
</html>
2.了解web前端开发的常用术语，以及html标签与通用文档结构的认识
常用术语
Hyper Text Markup Language(超文本标记语言, 又称 HTML)
Cascading Style Sheets (层叠式样式表, 又称 CSS)
Document Object Model (文档对象模型, 又称 DOM)
JavaScript Programming Language (JavaScript编程语言, 又称: ECMAScript 6, ES6, JavaScript 2015)
Web API’s (Web应用程序接口, 又称 HTML5 API 或浏览器 API)
Hypertext Transfer Protocol (超文本传输协议, 又称 HTTP)
Uniform Resource Locator’s (统一资源定位符, 又称 URL)
JavaScript Object Notation (JavaScript对象表示, 又称 JSON)
Web Content Accessibility Guidelines (网页内容无障碍设计指南, 又称 WCAG) & Accessible Rich Internet Applications (富Internet应用程序的无障碍设计, 又称 ARIA)
html标签
双标签:
<b></b> 字体加粗
<i></i> 斜体
<u></u> 字体下划线
<s></s> 删除线
<strike></strike> 删除线
单标签:
<br /> 换行
<hr /> 水平线
向右双箭头 :»
注册商标符：®
版权符号：©
双引号:"
链接
<a href="http://www.mamicode.com/#" title="">链接文本/图片</a>
注:# 换成所要链接的文件相对地址。title:为链接提示信息。
图片链接：
<img src="" width="" hegiht="" >
src:图片链接相对地址，alt：图片信息，鼠标悬停时跳出来的文字 width：图片宽度，height:图片高度。
表单：
表单开始标签：<form name="表单名称" method="post/get" action="提交地址">
文本框：<input type="text" name="名称" value="http://www.mamicode.com/值" placeholder="框中的字一打字就消失"/>
密码框：<input type="password" name="名称" value="http://www.mamicode.com/值"/>
单选按钮：<input type="radio" name="名称" checked /> //单选的几个input的name值必须一样 checked表示选中
复选框：<input type="checkbox" name="名称" checked />
列表：
<select>
<option value="http://www.mamicode.com/值" selected></option> // selected表示选中
</select>
文本区域：<textarea cols="文本的宽度" rows="文本行数"></textarea>
//这玩意儿会自带一个放大缩小的功能。可用resize:none来消除
单纯可爱的按钮:<input type="button" value="http://www.mamicode.com/值">一个没有任何功能的按钮
提交按钮:<input type="submit" name="名称" value="http://www.mamicode.com/值" /> //value默认为：提交查询，可以自己填写，也可以换成图片
重置按钮 <input type="reset" name="名称" value="http://www.mamicode.com/值" />
表单结束标签:</form>
#注意！做交互时，最好用上<label></label>把input和文字绑起来，这样不用扣扣索索小心翼翼地点那个小区域了，点文字即可实现选中效果。然后用上 cursor:pointer （手型）更好
3.搭建web基本的框架结构，对html语言进行初步运用
【html】结构、术语、标签