html基础与入门
html就是指一个html文件,它是由各种标签组成的
html分为 < !DOCTYPE html > 和 Head 和 Body
- Head title+meta+link+style
- Body 标签元素+script
标签元素在js里叫做节点dom-node,节点,标签,元素都是他的叫法
最常用的标签元素当然是 div
其次还有 a,p,span,img,table标签,表单标签,按钮button
- table标签有table,thead,tbody,tr,th,td
- 表单标签有form,input(输入框,密码框,单选,多选,下拉框,textarea,提交submit)
标签有属性和方法的触发条件
标签有特有的属性attr
,每个属性有特定的功能,是html标签特有的
比如a标签和link的href,a标签还有一个target,script和img的src,表单标签的value,disabled,单选多选的checked,select的selected 等等等
标签还可以自定义属性,就是在标签里写什么属性都行,不影响标签的使用,常用来记录数据,比如this-id="",data-id="",aa="",bb=""....但是最能被理解的,不会被下一个维护者骂娘的肯定是data-xx=""
怎么取得自定义属性,或者自带属性的值在js里讲
标签还能赋予方法
,比如给div的点击条件绑定方法
<div onclick="say()">点击我执行js的say方法</div>
还可以直接写行内方法
<div onclick="alert(1111)">点击我执行alert方法</div>
这个触发条件是标签自带的,给没有这个触发条件的标签添加方法是不会执行的,比如单选,多选,下拉框,文件选择框有onchange触发条件,form有submit触发条件,输入框有光标移入移出键盘按下触发条件,但是div没有,所以给一个div添加onchange去执行say的时候,say是怎么都不会执行的
标签元素分为块级元素,行内元素
- 块级元素就是宽度自动就是占满父元素的,而高度是由子元素撑开的,可以通过css改变宽高,跟另一个元素一起会把自己占一行,把自己换行,把下一个挤换行,天生的块级元素有div,p,以及html5的语义化标签
- 行内元素就是一行可以有多个元素的,他们的宽和高都是由子元素撑开的,设置宽高是不生效的,天生的行内元素有span,button,表单标签,img
而任何一个标签元素都是可以用css的display改变,只要记住他们的特点就行
讲讲标签的理解
- 讲讲a标签,a标签是用来跳转连接的,如果不是就别用;
- 讲讲img标签,img标签在足够大的区域里,会显示自身图片的原始大小,只把宽度设置为100%,会占满宽度的区域,高度由自身比例改变,也可以只设置高度,让宽度按图片比例改变,也可以同时设置宽度和高度,但是会导致图片变形,所以一般只设置宽度为100%,通过改变img的父标签的宽度控制img标签的宽度;
- 讲讲一些废弃的标签,font,color,time,这些标签别用,虽然很语义化但是别用,不解释;
- 讲讲form,form是很老的提交数据去到服务器的方式,现在除了提交文件根本用不到了,提交from的方式有【在子元素只有一个输入框时按下回车键,按下form标签里的submit标签或者button标签】,而且form提交会导致页面跳转,当然阻止form跳转的方式也是有的,
阻止form提交会在js的上传文件的几种方式里讲
,我想说的是除了文件上传之外别用到form,别用form,别用form; - 谈谈input[type=submit]和button,这两个标签平时能当按钮使用,在form标签里触发提交事件,而且这两个标签自带样式,很丑的样式,还得手动去去除,所以能别用就别用,用span去代替他们的使用
html其实没什么好讲的,因为入门只有div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个页面</title>
<link rel="stylesheet" href="">
</head>
<body>
<div>
<p>Hello Word</p>
<img src="" alt="">
</div>
<script type="text/javascript">
</script>
</body>
</html>
html基础与入门的更多相关文章
- Linux基础知识入门
[Linux基础]Linux基础知识入门及常见命令. 前言:最近刚安装了Linux系统, 所以学了一些最基本的操作, 在这里把自己总结的笔记记录在这里. 1,V8:192.168.40.10V1: ...
- cmd 与 bash 基础命令入门
身为一个程序员会用命令行来进行一些简单的操作,不是显得很装逼嘛!?嘿嘿~ ヾ(>∀<) cmd 与 bash 基础命令入门 简介 CMD 基础命令 ...
- IM开发者的零基础通信技术入门(二):通信交换技术的百年发展史(下)
1.系列文章引言 1.1 适合谁来阅读? 本系列文章尽量使用最浅显易懂的文字.图片来组织内容,力求通信技术零基础的人群也能看懂.但个人建议,至少稍微了解过网络通信方面的知识后再看,会更有收获.如果您大 ...
- IM开发者的零基础通信技术入门(一):通信交换技术的百年发展史(上)
[来源申明]本文原文来自:微信公众号“鲜枣课堂”,官方网站:xzclass.com,原题为:<通信交换的百年沧桑(上)>,本文引用时已征得原作者同意.为了更好的内容呈现,即时通讯网在收录时 ...
- 序言 - PHP零基础快速入门
我为什么要写<PHP零基础快速入门>? 原因: PHP 真心简单,适合零基础的人快速入门掌握,身边的人学习一两周上手开发的比比皆是: 市面上的文章或书籍对初学者并不友好,多半枯燥乏味,我相 ...
- Java基础语法入门01
Java基础语法入门01 学习java你要先进行去了解JDK,JRE,JVM JDK Java开发工具包 JRE Java语言开发的运行环境 JVM Java虚拟机,用于Java语言的跨平台所用. 当 ...
- 贝叶斯公式由浅入深大讲解—AI基础算法入门
1 贝叶斯方法 长久以来,人们对一件事情发生或不发生的概率,只有固定的0和1,即要么发生,要么不发生,从来不会去考虑某件事情发生的概率有多大,不发生的概率又是多大.而且概率虽然未知,但最起码是一个确定 ...
- Hadoop基础-MapReduce入门篇之编写简单的Wordcount测试代码
Hadoop基础-MapReduce入门篇之编写简单的Wordcount测试代码 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本文主要是记录一写我在学习MapReduce时的一些 ...
- 零基础快速入门web学习路线(含视频教程)
下面小编专门为广大web学习爱好者汇总了一条完整的自学线路:零基础快速入门web学习路线(含视频教程)(绝对纯干货)适合初学者的最新WEB前端学习路线汇总! 在当下来说web前端开发工程师可谓是高福利 ...
- Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 7. 条件循环
条件循环能够让程序在条件成立时(即为真时)重复执行循环体中的语句.如果条件一直成立(即永远不会为假),则循环会一直进行下去,不会停止.如果初始时,条件不成立,则循环 1 次也不会执行.Python 中 ...
随机推荐
- js学习:基本数据类型
数据类型在 js 里面分为两个大类: 基本数据类型 引用数据类型 基本数据类型: 数值 number 各种意义上的数字:整数.小数.浮点数等 正数:100 负数:-100 浮点数,小数:1.234 进 ...
- SVM总结(参考源码ml.hpp)
如何使用,请查阅我的另一篇博客——SVM的使用 1.setType() SVM的类型,默认SVM::C_SVC.具体有C_SVC=100,NU_SVC=101,ONE_CLASS=102,EPS_SV ...
- PTA的Python练习题(十)
从 第3章-22 输出大写英文字母 开始 1. a=str(input()) b='' for i in a: if 'A'<=i<='Z' and i not in b: b=b+i i ...
- Apache Shiro安全(权限框架)学习笔记二
课程目标 通过学习本课程掌握权限管理的设计思想及方法,使用Shiro框架完成权限管理功能开发. 1. 理解基于资源的权限管理方法. 2. 掌握权限管理的数据模型. 3. 掌握不使用shiro开发 ...
- 解决HTML5(富文本内容)连续数字、字母不自动换行
最近开发了一个与富文本相关的功能,大概描述一下:通过富文本编辑器添加的内容,通过input展示出来(这里用到了 Vue 的 v-html 指令). 也是巧合,编辑了一个只有数字组成的长文本,等到展示的 ...
- 在webView中的返回键
在写webView中我们按一下返回键,退到上一个我们浏览的网页,到第一个页面时,按两下退出程序,且按一下时提示你在按一下退出程序 只要加上这个方法即可 public void onBackPresse ...
- DAC
DAC的功能:可以输出电压(无触发,设置DAC转换值,DAC使能更新寄存器和启动转换)或者波形(连续转换,用DMA发送数据,定时器触发).首先有个正弦波波形的数组,内存到DAC的DMA通道不断的将正弦 ...
- Locale
1. Locale 概述 2. Windows 区域设置 3 Linux Locale 3.1 Linux Locale 语言环境名称格式 3.2 常用区域描述(简写)日期习惯 3.3 日期显示格式 ...
- 随机游走模型(Random Walk)
给定了一个时间顺序向量\(z_1,...,z_T\),rw模型是由次序r来定义的,\(z_t\)仅取决于前\(t-r\)个元素.当r = 1时为最简单的RW模型. 给定了向量的其他元素,\(z_t\) ...
- Django 学习 之 模板(html)与配置静态文件
一.模板(html) 1.模板语法之变量:语法为 {{ }} 在 Django 模板中遍历复杂数据结构的关键是句点字符, 语法:{{ var_name }} var_name 是一个变量名称,需要和 ...