体育生学编程——html学习

HTML学习

1、HTML介绍(了解即可)

HTML (Hyper Text Markup Language):
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></html>  <p>段落段落</p>
其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。例如:换行<br /> 分割线<hr />  也可以写作<br><hr> 斜线可以不写

 HTML标签中的属性:
想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性
通过对属性值的改变,增加了更多的效果选择
属性名与属性值之间用“=”连接
属性值可以用双引号、单引号、不用引号,一般都会用双引号(或公司规定书写规范)

2、头标签<head>

<title>
      页面的标题
<base>
      页面超链接的基本属性
        href:页面所有超链接默认从这个路径开始
        target:页面所有超链接默认的target

<meta>
        页面描述信息
        <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>:
        <font size=5 color=red>字体标签示例</font> 
        简单颜色可是直接写对应的英文
        复杂颜色用16进制表示,表现形式#FF0000两个数为一组,按红,绿,蓝排列
        如:#FF0000表示红色、#00FF00表示绿色

标题标签<h1>、<h2> ... <h6>:
        标题是文本中常用的内容,为了方便操作而定义的
        其实就是某个字号和粗体的组合

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>

链接标签<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>

图像标签<img>:
<span style="font-size:14px;"><span style="white-space:pre">	</span><img src="1.jpg" align="right" border="3" alt="图片说明文字" /> </span>
        src: 图片路径
        align: 对齐方式
        border: 边框粗细
图像地图<map>:
        在<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>:
        <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

内联框架<iframe>:     
<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>

表格标签<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>
技术分享
多行多列<td>:
        colspan属性:控制一个单元格占多列
        rowspan属性:控制一个单元格占多行 
<thead>、<tbody>、<tfoot>:
        三个标签都是放在table下,内部可以放tr标签
        <thead> 表头,通常用在第一行
        <tbody> 表体,表格中间的内容,可以有多个
        <tfoot> 表脚,通常用在最后一行       


9、表单<form>重要<input>

表单标签<form>:
        内部可以包含文本框、单选、多选、下拉列表等表单项
        可以把用户在页面中的输入和选择提交到一个地址
        常用属性:
        action:提交地址
method:提交方式
<span style="font-size:14px;"><form action="要提交的地址" method="get">
	<input type="text" name="username">
	<input type="password" name="password">
        </form></span>

输入项<input>:
        通过指定type属性可以定义不同的输入项:
text:普通文本框
password:密码框
radio:单选按钮
checkbox:多选按钮
file:文件
hidden:隐藏字段
submit:文本提交按钮
image: 图片提交按钮
reset:重置按钮
button:普通按钮
下拉列表<select>
      默认为单选,multipe属性指定是否为多选
        size属性指定显示个数
        内部用<option>标签指定其中选项
文本域<textarea>
        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><input
			 name="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="普通按钮" onclick="alert('你好!')">
				</td>
		</tr>
		<label accesskey="u" for="user"></label><!-- 快捷键到指定id 仅ie支持 -->
	</table>
	<input type="hidden" name="xxx" value="ssss">	
	</form></span>
技术分享


10、注释<!-- --> 特殊字符

特殊字符:
        一些特殊符号,比如< > & 等,在代码中会被浏览器识别并解释
        所以用一些特殊的方式来表示
技术分享
注释用<!-- 注释内容-->

 


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。