前端
- 前端主要内容
- HTML
  - 第一个页面
  - 指令
  - 转义字符
  - 标签

前端

前端主要内容

html:页面架构
css:页面布局
javascript:页面交互
jquery:js的工具包
bootstrap:快速页面搭建框架

HTML

html是超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。html不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

标记：符号 - 标签 - 没有逻辑
组成：转义字符、指令、标签
目的：完成页面架构的搭建

第一个页面

<!--注释：doctype 必须出现在页面的最上方，规定该文档采用的html版本类型 -->
<!doctype html>
<!--html语言不区分大小写--><!--页面标签：包含所有页面内容，只有head与body两个子标签-->
<html><!--头标签：样式、脚本、后勤操作：页面编码、页面标签标题图标--><head><title>第一个页面</title><meta charset="utf-8"><style></style><script></script></head><!--体标签：页面显示内容存放区域、样式、脚本--><body>你好，html &nbsp;&nbsp;&nbsp;&nbsp; 这是我的第一个页面<style></style><script></script></body>
</html>

指令

被<>包裹，以!开头，包括：

*       注释：<!-- -->
*       文档类型：<!doctype>

转义字符

被 & ; 包裹，内容为特殊的字母或数字组成

<: &lt;
>: &gt;
空格：&nbsp;
版权：&copy;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>标签</title>
</head>
<body><!-- 1、标题：加粗 --><!--重点：h1标签的语义：是该页面的主标题--><h1 title="这是标题">一级标题</h1><h2>二级标题</h2><h6>六级标题</h6>正文文本 <br>正文文本<!--2、段落: 自带换行，有段落间距--><p>这是一个段落这是一个段落这是一个段落这是一个段落</p><p>这是一个段落这是一个段落这是一个段落这是一个段落</p><!--3、换行标签-->正文文本 <br>正文文本 <br><!--自带换行的文本标签：h1~h6 p --><!--4、文本类型标签：不自带换行的文本标签 - span i b --><span>span</span><span>span</span><b>加粗标签</b><b>加粗标签</b><strong>以加粗作为强调的强调标签</strong><strong>以加粗作为强调的强调标签</strong><i>斜体标签</i><i>斜体标签</i><em>以斜体作为强调的强调标签</em><em>以斜体作为强调的强调标签</em><br><span>一般用来嵌套其它文本类标签 上<sup>角标</sup> 下<sub>角标</sub> </span><!--5、超链接标签--><a href="https://www.baidu.com" target="_blank">前往百度</a><br><!--6、图片标签--><!--title：鼠标悬浮的文本提示--><!--alt：img标签资源加载失败--><img title="这是二哈" alt="二哈" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2969644141,2516639069&fm=26&gp=0.jpg"><!--7、列表标签: 无序ul>li 有序ol>li --><!--ul>li{第$列}*5--><ul><li>第1列</li><li>第2列</li><li>第3列</li><li>第4列</li><li>第5列</li></ul><!--8、表格标签 table>tr>th|td --><!--tr:行 th:标题单元格 td:普通单元格 --><!--border:边框--><!--cellspacing:单元格的间距，最小为0，但是单元格之间是两条线，可以用rules="all" 处理成一条线 --><!--cellpadding：单元格的内边距（文本与标签的间距）--><table border="1" width="500" height="300" rules="all" cellspacing="0" cellpadding="10"><caption>表格标题</caption><thead><tr><!--th{标题}*3--><th>标题</th><th>标题</th><th>标题</th></tr></thead><tbody><!--(tr>td{单元格}*3)*2--><!--rowspan:合并行--><!--colspan:合并列--><tr><td rowspan="2">单元格</td><td colspan="2">单元格</td></tr><tr><!--<td>单元格</td>--><td>单元格</td><td>单元格</td></tr></tbody><tfoot><tr><td>表尾表尾</td><td>表尾表尾</td><td>表尾表尾</td></tr></tfoot></table><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

表单

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>表单标签</title>
</head>
<body><!--1、form的作用：完成前后台数据的交互的 - 将用户录入的信息提交给后台 | 文件上传 --><form action=""><p><!--label作为input的文本解释标签，for绑定id--><!--value属性是表单标签的内容，就是提交给后台的--><!--name是提交给后台的key，value是值--><!--placeholder是文本占位符--><!--type是决定标签的类型本质(input|button)--><!--multiple,checked布尔类型属性，不需要写值，multiple多选 checked默认激活--><label for="username">账号：</label><input id="username" type="text" value="Owen" name="usr"></p><p><label for="password">密码：</label><input id="password" type="password" placeholder="请输入密码" name="pwd"></p><p><input type="hidden" value="123asd{asdf2q1})sdf12" name="pk"></p><p><input type="file" name="file" multiple></p><p>男<input type="radio" value="male" name="sex" checked>女<input type="radio" value="female" name="sex"></p><p>男<input type="checkbox" value="male" name="hobby" checked>女<input type="checkbox" value="female" name="hobby" checked>哇塞<input type="checkbox" value="other" name="hobby"></p><p><button type="button">普通按钮</button><button type="reset">重置按钮</button><button type="submit">提交按钮</button></p><p><textarea cols="30" rows="10"></textarea></p><p><input type="button" value="按钮" /><input type="reset" value="重置" /><input type="submit" value="登录" /></p></form>
</body>
</html>

标签的分类

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>标签的分类</title>
</head>
<body><h1>标签的分类</h1><hr><!-- 1、是否自带换行 --><!--带换行：h1 p div table form tr ul li --><!--不带换行：span i b a img input button label textarea--><!-- 2、单双标签 --><!--单标签（主功能）：br hr input img link --><!--双标签（主内容）：html head body h1 p span div a label button --><!-- / 代表标签的结尾，但是单标签可以省略 --><div></div><hr /><!--3、简单和组合标签--><!--组合：ul>li table>tr>td|th form>input -->
</body>
</html>

转载于:https://www.cnblogs.com/yellowcloud/p/11305339.html

31.前端之html相关推荐

字节3-1前端面试官自学Vue的正确姿势
大家好,我是若川. 前不久和一个字节前端TL朋友聊天,说到大厂前端供需脱节的情况.特别是使用Vue框架的,因为简单易学好上手,但是能够深入理解的人并不多,大多都只停留在应用层面,缺乏更深层面的理解. ...
8.31前端 jQuery
2018-8-31 19:52:09 周末吧这几天课看完结束前端!然后进行Django!!! 越努力,越幸运! day56 2018-03-161. 内容回顾1. 样式操作1. 操作class2. ...
【GO】K8s 管理系统项目31[前端部分–仪表盘]
k8s 管理系统项目[前端部分–仪表盘] 1. 仪表盘代码 src/views/home/Home.vue <template><div class="home" ...
2021/10/31 前端开发之JavaScript+jQuery入门第十二章jQuery事件与动画
目录 1.jQuery中的事件 1.1 事件的组成 1.2 基础事件 2.载入事件 3.鼠标事件 4.键盘事件 5.浏览器事件 6.表单事件 7.绑定事件 8.移除事件 9.复合事件 10.控制元素显 ...
字节内部前端开发手册(完整版)开放下载！
备战2022,准备好了吗? 据字节HR部门发布的最新信息,2019年以来字节连续3年扩招,而即将到来的2022年春招前端岗位数不低于3000,虽连年扩招,但是报录比却从2019年的3%下降到今年的1% ...
【面试题记录】2020前端秋招笔试面试题目记录
笔试题记录 1. 空元素 Empty Element (滴滴笔试) 空元素是HTML/SVG里的不可能存在子节点的元素. 个人理解就是:自闭和标签 HTML中的空元素: <br/> < ...
非科班出身拿下字节跳动前端offer，我有一份50000字面试宝典分享给你！
个人经历本人211学校,回想我大一的时候,读的是机电工程,因为对计算机专业好就业比较看重,后来在大一下的时候开始了自己双学位之路,开始了学计算机专业,从此开始了科班生的生涯.接触前端也大概是在大一下 ...
h5前端开发，CSS全局样式
第一章 HTML(★★) 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 2.HTML5的优点与缺点? 3.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? 4.HTML5有哪些 ...
JavaScript基础面试题，h5前端开发
标准文档流标准文档流,指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式.前面内容发生了变化,后面的内容位置也会随着发生变化. HTML就是一种标准文档流文件 HTML中的标准 ...
前端劝退之前端知识体系（前端面试体系）
关注公众号前端开发博客,领27本电子书回复加群,自助秒进前端群写文的目的主要是梳理下知识,能对复习有点帮助就行,本文主要针对前端知识体系相关,涉及的内容有: 浏览器计算机网络前端基础(htm ...

31.前端之html

前端

前端主要内容

HTML

第一个页面

指令

转义字符

标签

基础标签

表单

标签的分类

31.前端之html相关推荐

最新文章

热门文章