Bigger-Mai 养成计划,前端基础学习之HTML
HTML 超文本标记语言(Hyper Text Markup Language)
1、一套规则,浏览器认识的规则。
2、开发者:
学习Html规则
开发后台程序:
- 写Html文件(充当模板的作用)@@@@
- 数据库获取数据,然后替换到html文件的指定位置(web框架)
3、本地测试
- 找到文件路径,直接浏览器打开
- pycharm打开测试
4.编写Html文件
- doctype对应关系
- html标签,标签内部可以写属性
- 注释: <!-- 注释的内容 -->
5、标签分类
- 自闭合标签
<meta charset="UTF-8">
- 主动闭合标签
title>老男孩</title>
6、head标签中
- <meta -> 编码,跳转,刷新,关键字,描述,IE兼容
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- title标签
- <link /> 搞图标,欠
- <style />欠
- <script> 欠
7、body标签
- 图标, > <
- p标签,段落
- br,换行
- 产生粗体字的 HTML 标签 <b>
- 产生斜体字的 HTML 标签 <i>
- hr 标签定义水平线
======== 小总结 =====
所有标签分为:
块级标签: div(白板),H系列(加大加粗),p标签(段落和段落之间有间距)
行内标签: span(白板)
标签之间可以嵌套
标签存在的意义,css操作,js操作
ps:chorme审查元素的使用
- 定位
- 查看样式
- h系列
- div
- span
- input系列 + form标签
input type='text' - name属性,value="赵凡"
input type='password' - name属性,value="赵凡"
input type='submit' - value='提交' 提交按钮,表单
input type='button' - value='登录' 按钮
input type='radio' - 单选框 value,checked="checked",name属性(name相同则互斥)
input type='checkbox' - 复选框 value, checked="checked",name属性(批量获取数据)
input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data"
input type='rest' - 重置
<textarea >默认值</textarea> - name属性
-select标签 - name,内部option value, 提交到后台,size,multiple
- a标签
- 跳转
- 锚 href='#某个标签的ID' 标签的ID不允许重复
- 制作电子邮件链接 <a href="mailto:xxx@yyy">
- img
src 规定显示图片的URL
alt 规定图片的替代文本
title
- 列表
ul 产生圆点符号开头的列表
li
ol 产生数字符号开头的列表
li
dl 产生分级的列表
dt
dd
- 表格
table
thead
tr
th
tbody
tr
td
colspan = 'num'合并行
rowspan = 'num'合并列
20个标签
Bigger-Mai 养成计划,前端基础学习之HTML的更多相关文章
- web前端基础学习路线
1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...
- Bigger-Mai 养成计划,前端基础学习之CSS
在标签上设置style属性: background-color: #2459a2; height: 48px; ... 编写css样式: 1. 标签的style属性 2. 写在head里面 style ...
- Anibei前端基础学习
html.html5.CSS2.CSS3.JQuery.Vue.js学习,后端程序媛开始学习前端开发啦.
- Vue前端基础学习
vue-cli vue-cli 官方提供的一个脚手架(预先定义好的目录结构及基础代码,咱们在创建Maven项目的时可以选择创建一个骨架项目,这个骨架项目就是脚手架),用于快速生成一个vue项目模板 主 ...
- Web前端基础学习-1
HTML5/CSS简介 首先来说一说什么是HTML5,HTML5可以认为是字面上的意义,也就是HTML的第五代产品,当然从另一个角度来说它是一种新的富客户端解决方案. HTML5 将成为 HTML.X ...
- Web前端基础学习-2
盒子模型 在页面中,我们将所有的元素全部看做是一个盒子,页面布局就是将大大小小不同的盒子堆砌在一起,而一个盒子由以下几部分组成: padding:内边距,内容到边框的距离: margin:外边距,其他 ...
- Web前端基础学习-3
bfc(block formatting context) 块级格式化上下文 生成bfc的方式: 1.根元素: 2.float属性不为none(脱离文档流): 3.position为absolute或 ...
- Web前端开发工程师养成计划【转载】
Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...
- 高手养成计划基础篇-Linux第二季
高手养成计划基础篇-Linux第二季 本文来源:i春秋社区-分享你的技术,为安全加点温度 前言 前面我们学习了文件处理命令和文件搜索命令,简单的了解了一下Linux,但是仅仅了解这样还不行,遇 ...
随机推荐
- COMP9021 PRINCIPLES OF PROGRAMMING
QUIZ 7COMP9021 PRINCIPLES OF PROGRAMMING$ python3 quiz_7.pyEnter four integers: 0 2 2 8Here is the g ...
- 第一次接触Android Studio
生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4390905.html
- mac上sed -i 执行失败报错
比如说我要替换version.txt文件中的version=1.1 为version=1.2,比如test.txt文件内容如下: version=1.1 此时我们会使用sed来替换,如果是涉及比较多的 ...
- Random Forest总结
一.简介 RF = Bagging + Decision Tree 随机:数据采样随机,特征选择随机 森林:多个决策树并行放在一起 几个误区: 不是每棵树随机选择特征,而是每一个结点都随机选择固定数目 ...
- 构建RN或Weex项目时,使用Android Studio常遇到的问题
1 . androidStudio报错No cached version available for offline mode 解决方法 原因是之前为了提高编译速度,在Gradle设置选项中开启了Of ...
- linux下chromedriver的安装
很多时候,发现phantomjs被一些网站屏蔽导致我们无法达到想要的结果,一方面phantomjs也停止维护,这时候们可以使用chromedriver(谷歌)或者firefoxdriver(火狐)来代 ...
- node多人聊天室搭建
1.采用websocket: 为什么不用ajax的http:在用HTTP发送消息时,必须用一个新的TCP/IP连接.打开和关闭连接需要时间.此 外,因为每次请求都要发送HTTP头,所以传输的数据量也比 ...
- java 访问数据库
Class.forName(“com.microsoft.sqlserver.jdbc.SQLServerDriver”);//依据不同数据库,加载不同驱动 String url = “jdbc:sq ...
- C#中的as关键字
你能进到这篇文章…… 首先你可能明白类似于 double num=0;int m=(int) num; 或者你明白 int m=209;String str=m.toString();或者说你甚至见过 ...
- 介绍Kubernetes监控Heapster
什么是Heapster? Heapster是容器集群监控和性能分析工具,天然的支持Kubernetes和CoreOS,Kubernetes有个出名的监控agent—cAdvisor.在每个kubern ...