体育生学编程——html学习
HTML学习
1、HTML介绍(了解即可)
HTML就是超文本标记语言的简写,是最基础的网页语言
HTML的版本:
2.0(IETF)、3.0(W3C)、4.01(W3C)、5.0(W3C)
IETF: Internet Engineering Task Force
W3C:World Wide Web Consortium
HTML的特点:
是通过标签来定义的语言,代码都是由标签所组成,代码不用区分大小写
由<html>开始,</html>结束
由头部分<head></head>和体部分<body></body>两部分组成
头部分是给HTML页面增加一些辅助或者属性信息,它里面的内容会最先加载
体部分是真正存放页面数据的地方
多数标签都是有开始标签和结束标签。例如:<html></html> <p>段落段落</p>
其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。例如:换行<br /> 分割线<hr /> 也可以写作<br><hr> 斜线可以不写
HTML标签中的属性:
想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性
通过对属性值的改变,增加了更多的效果选择
属性名与属性值之间用“=”连接
属性值可以用双引号、单引号、不用引号,一般都会用双引号(或公司规定书写规范)
2、头标签<head>
页面的标题
页面超链接的基本属性
href:页面所有超链接默认从这个路径开始
target:页面所有超链接默认的target
页面描述信息
<meta name="keywords" content="Java,.Net,Android,iOS">蜘蛛爬取时看,搜素引擎SEO有关
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 告知浏览器此页面内容、类型、编码
<meta http-equiv="refresh" content="3;url=http://www.maomao.com">三秒后刷新到某个页面
3、字体<font>
<font size=5 color=red>字体标签示例</font>
简单颜色可是直接写对应的英文
复杂颜色用16进制表示,表现形式#FF0000两个数为一组,按红,绿,蓝排列
如:#FF0000表示红色、#00FF00表示绿色
标题是文本中常用的内容,为了方便操作而定义的
其实就是某个字号和粗体的组合
4、列表<dl><dt><dd>
<dl>列表、<dt>标题、<dd>列表项
<ol>列表、<li>列表项
type属性更改项目符号(a A 1 i I)
<ul>列表、<li>列表项
type属性更改项目符号(circle空心圆、disc实心圆、square正方形)
<span style="font-size:14px;"> <dl><dt>公司部门</dt><dd>软件研发部</dd><dd>财务部</dd><dd>行政部</dd><dl><ol type="i"><li>软件研发部</li><li>财务部</li><li>行政部</li></ol><ul type="square"><li>软件研发部</li><li>财务部</li><li>行政部</li></ol></span>
效果图
5、超链接<a>
<span style="font-size:14px;"><span style="white-space:pre"> </span> <span style="font-size:18px;"> <a href="http://www.maomao.com" target="_blank">猫猫学编程</a></span></span>
href:要链接的地址
target:显示位置
<span style="font-size:14px;"><span style="white-space:pre"> </span><a name="mark" /></span>
在页面的某个位置做出标记
<span style="font-size:14px;"><span style="white-space:pre"> </span><a href="#mark">跳转到标记</a></span>
点击链接跳转到标记位置
6、图像<image>
<span style="font-size:14px;"><span style="white-space:pre"> </span><img src="1.jpg" align="right" border="3" alt="图片说明文字" /> </span>
src: 图片路径
align: 对齐方式
border: 边框粗细
在<img>标签中使用usemap属性,指定图像可以用作地图
使用<map>及<area>标签可以把图像的一部分作为超链接
<span style="font-size:14px;"><span style="white-space:pre"> </span><img src="Sunset.jpg" alt="图片说明文字" usemap="#Map" /><map name="Map"><area shape="rect" coords="50,59,116,104" href="1.html" /><area shape="circle" coords="118,203,40" href="2.html" /></map></span>
7、框架<frameset>
<frameset>中可以放入多个<frame>框架,把页面分成几个部分
<frameset>不能放在body中
<span style="font-size:14px;"><frameset rows="20%,*"><frame src="1.html" name="top" /><frameset cols="20%,*"><frame src="2.html" name="left" /><frame src="3.html" name="right" /></frameset>
</frameset></span>
rows:框架集合每行的高度
cols:框架集合每列的宽度
src:框架中显示的页面
name:框架的名字,可用做超链接的target
<span style="font-size:14px;"><span style="white-space:pre"> </span><iframe src="1.html">抱歉,您的浏览器无法显示iframe标签</iframe><iframe src="2.html">抱歉,您的浏览器无法显示iframe标签</iframe></span>
可以在页面中嵌入另一个页面
src:要嵌入的页面
innerHTML:如果浏览器无法显示iframe,则会显示该文本
8、表格<table>
<caption> 标题
<tr> 表格中的一行
<td> 放在<tr>中代表一个单元格
<th> 类似<tr>通常用在第一行或最后一行
<span style="font-size:14px;"><table border="1" width="40%" > <!-- 40%会岁窗体大小变化 --><caption>表格标题</caption><tr><th>姓名</th><th>年龄</th></tr><tr algin=”center”><td>张三</td><td>23</td></tr>
</table></span>
colspan属性:控制一个单元格占多列
rowspan属性:控制一个单元格占多行
三个标签都是放在table下,内部可以放tr标签
<thead> 表头,通常用在第一行
<tbody> 表体,表格中间的内容,可以有多个
<tfoot> 表脚,通常用在最后一行
9、表单<form>重要<input>
内部可以包含文本框、单选、多选、下拉列表等表单项
可以把用户在页面中的输入和选择提交到一个地址
常用属性:
action:提交地址
method:提交方式
<span style="font-size:14px;"><form action="要提交的地址" method="get"><input type="text" name="username"><input type="password" name="password"></form></span>
通过指定type属性可以定义不同的输入项:
text:普通文本框
password:密码框
radio:单选按钮
checkbox:多选按钮
file:文件
hidden:隐藏字段
submit:文本提交按钮
image: 图片提交按钮
reset:重置按钮
button:普通按钮
默认为单选,multipe属性指定是否为多选
size属性指定显示个数
内部用<option>标签指定其中选项
rows属性指定行数
cols属性指定列数
标签<label>
可以用来方便点击或者设置快捷键
<label><input type="radio"> 男</label>
<label for="user" accesskey="u">用户名(u)</label>
<input type="text" id="user" />
<span style="font-size:14px;"> <form action="success.html" method="get"><table width="50%" border="1" cellpadding="10" cellspacing="0"><tr><td>用户名:</td><td><input id="user" name="username" type="text"></td></tr><tr><td>密码:</td><td><inputname="password" id="pass"type="password"></td></tr><tr> <td colspan="2" align="center"><label><input type="radio" name="gender" value="male">男</label><label><input type="radio" name="gender" value="female">女</label></td></tr><tr><td colspan="2" align="center"><label><input type="checkbox" name="interest" value="smoke">抽烟</label><label><input type="checkbox" name="interest" value="drink">喝酒</label><label><input type="checkbox" name="interest" value="tangtou">烫头</label></td></tr><tr><td colspan="2" align="center"><input type="file" name="portrait "></td></tr><tr><td>城市</td><td><select name="city"><!--multiple="multiple" size="10" --><option>-请选择城市-</option><option value="bj">-北京-</option><option>-广州-</option><option>-成都-</option><option>-上海-</option></select></td></tr><tr><td>自我介绍</td><td><textarea name="rusume" rows="10" cols="30"></textarea></td></tr><tr><td colspan="2" align="center"><input type="submit" value="注册"><input type="image" src="../image/reg.gif"><input type="reset" value="重填"><input type="button" value="普通按钮" οnclick="alert('你好!')"></td></tr><label accesskey="u" for="user"></label><!-- 快捷键到指定id 仅ie支持 --></table><input type="hidden" name="xxx" value="ssss"> </form></span>
10、注释<!-- --> 特殊字符
一些特殊符号,比如< > & 等,在代码中会被浏览器识别并解释
所以用一些特殊的方式来表示
体育生学编程——html学习相关推荐
- 高中学历能学python_高中生学编程--Python学习.pdf
目录 前言 高中生如何学习编程 一.Python语言的入门 二.计算机系统的简单介绍 三.计算机语言的介绍 四.Python语言简单介绍 五.Python的语言基础 六.Python的程序流程 七.P ...
- 一个体育生的编程之路(一)
(一)打字与考计算机等级 记得小学时,学校里有个老师会用电脑,当时觉得电脑是个很神奇的高科产品.后来我们学校得到浪潮捐赠的一台电脑,看见那个老师在用电脑玩扑克牌.这是我第一次见到电脑长啥样. 高中时有 ...
- cfile清空文件内容_体育老师学编程(第11天)python常用的文件读写操作
学习内容:python文件处理 一.什么是文件: 前边学习了计算机的存储设备分为内存和硬盘两种,内存容量小,断电就丢失,我们若想长期存储一段内容,就需要存到硬盘中,那么存入的方式就是以文件形式存入的. ...
- 趣学python教孩子学编程_《趣学Python——教孩子学编程》学习笔记第1-3章
第1章 Python不是大蟒蛇 1.1 关于计算机语言 计算机程序是一组让计算机执行某种动作的指令.软件就是计算机程序的集合. 一种编程语言就是一种特定的与计算机交谈的方式,这种方式使用计算机和人都能 ...
- oracle 老白,老白学编程 - Netdata学习 - numa
Numa 介绍 NUMA,即Non-Uniform Memory Access Architecture,非统一内存访问架构. 背景 传统的SMP中, 所有处理器共享系统总线,当cpu数目增大时, 系 ...
- 0基础学编程难吗?多久能学会?转行IT常见的4个问题
近期收到很多大四或大三学生的问题,虽然有疑问,但这些人大部分还都是守得云开见月明的,毕竟他们已经从各个渠道了解到了编程并没有想象中的那么高不可得而是可以通过自己的学习,进入到这个行业里.这让他们有了新 ...
- 零基础转行学编程技术难吗?
编程并没有想象中的那么高不可得~而是可以通过自己的学习,进入到这个行业里.其实不光是刚毕业的学生有这样的担忧,想要转行的也有同款担忧,毕竟隔行如隔山. 多久能学会编程?知识点可以在短时间内了解,但是思 ...
- 30岁,转行学编程来的及吗?
常常会有网友提问:自己马上30了,现在转行学编程还来得及吗?不少热心的网友纷纷提供了自己的意见: "成不了技术大牛,就不学编程了吗?" "学习是一辈子的事情,哪里来的半路 ...
- 零基础学python尹会生_编程零基础应当如何开始学习 Python?
这是一篇小白自学Python的经验,针对没有任何经验.从零开始学习Python的童鞋,不管你是出于兴趣,还是想提升工作效率,或者想要转行,都可以作为一个参考. 作为过来人,先分享几点建议给你: 1.找 ...
最新文章
- 两分钟搞懂 JDK 与 JRE 的关系!
- 你需要学好知识图谱——用AI技术连接世界
- LeetCode 450 Delete Node in a BST(二叉搜索树中的删除结点)
- 【Flutter】Flutter 应用主题 ( ThemeData | 动态修改主题 )
- 20145328《网络对抗》Web基础
- matlab中多边形滤波器,几种常见空间滤波器MATLAB实现
- android /system,android:fitSystemWindows详解
- Promise的链式调用三种写法,Promise.all与式调用
- 开源GIS(六)——openlayers中overlay强大功能
- bzoj 3039: 玉蟾宫(悬线法)
- 评分预测会不会大于满分5.0的情况?
- [NOIP2016]愤怒的小鸟
- Tp 引入 simple_html_dom.php
- 双管道(CreatePipe)与本地cmd.exe进程通信(附源代码及编译好的程序,免费下载)
- bootbox 使用方式
- 如何关闭wps热点,如何关闭wpscenter,如何关闭我的wps
- 【最强实习生】20场Android面试斩获大厂offer,来看看我都会些什么
- java-php-python-ssm-新疆旅游专列订票系统-计算机毕业设计
- (转)台式机华硕主板双显卡切换,怎么舒服怎么来
- STM32与ESP8266物联网编程
热门文章
- SkyWalking触发告警发送邮箱
- 用74ls90组成二十四进制计数器_一个厉害的芯片芯片74LS190同步计数器可以做加法也可以做减法...
- 加餐 | Java 面试通关攻略
- 9. docker——DockerFile案例
- poj 1637 Sightseeing tour 混合欧拉图判定
- springboot+vue+elementui大学生社团活动报名系统平台
- ACL 2021 Question Answering
- 西电网安专硕考研分享
- 下载高清的壁纸,这几个网站就够了
- Kaldi 入门使用教程