体育生学编程--html学习_html/css_WEB-ITnose-tutoriel HTML-php.cn

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的标签：
多数标签都是有 开始标签和 结束标签。例如：

段落段落

其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在 标签内结束。例如：换行
分割线

也可以写作

斜线可以不写

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

2、头标签

<br> 页面的标题 <p class="sycode"> </p> <p class="sycode"> <base> <br> 页面超链接的基本属性 <br> href：页面所有超链接默认从这个路径开始 <br> target：页面所有超链接默认的target </p> <p class="sycode"> <br> </p> <p class="sycode"> <meta> <br> 页面描述信息 <br> <meta name="keywords" content="Java,.Net,Android,iOS"> <strong>蜘蛛爬取时看，搜素引擎SEO有关</strong> <br> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 告知浏览器此页面内容、类型、编码 <br> <meta http-equiv="refresh" content="3;url=http://www.maomao.com">三秒后刷新到某个页面 </p> <p class="sycode"> </p> <h2>3、字体<font></font> </h2> <p class="sycode"> 字体标签<font>： <br> <strong><font size="5" color="red"></font></strong>字体标签示例 <strong></strong></font> <br> 简单颜色可是直接写对应的英文 <br> 复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列 <br> 如：#FF0000表示红色、#00FF00表示绿色 </p> <p class="sycode"> <br> </p> <p class="sycode"> 标题标签</p> <h1>、<h2> ... <h6>： <br> 标题是文本中常用的内容，为了方便操作而定义的 <br> 其实就是某个字号和粗体的组合 <br> <h2>4、列表<dl> <dt></dt> <dd></dd> </dl> </h2> </h6> </h2> </h1> <p class="sycode"> 无标签： <br> </p> <dl>列表、<dt>标题、</dt> <dd>列表项 <p class="sycode"> 数字标签： <br> </p> <ol>列表、<li>列表项 <br> type属性更改项目符号（a A 1 i I） <br> <p class="sycode"></p> <p class="sycode"> 符号标签： <br> </p> <ul>列表、<li>列表项 <br> type属性更改项目符号（circle空心圆、disc实心圆、square正方形） <p class="sycode"> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><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> </ul> </dl> </dl></span></pre><div class="contentsignin">Copier après la connexion</div></div> </li> </ul> </li> </ol> 效果图 <p class="sycode"></p> <p class="sycode"> <br> </p> <h2>5、超链接<a></a> </h2> <p class="sycode"> 链接标签<a>： <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><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></pre><div class="contentsignin">Copier après la connexion</div></div> href：要链接的地址 <br> target：显示位置 <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><a name="mark"></a></span></pre><div class="contentsignin">Copier après la connexion</div></div> 在页面的某个位置做出标记 <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><a href="#mark">跳转到标记</a></span></pre><div class="contentsignin">Copier après la connexion</div></div> 点击链接跳转到标记位置 <br> </a></p> <h2>6、图像<image></image> </h2> <p class="sycode"> 图像标签<img alt="体育生学编程--html学习_html/css_WEB-ITnose" >： <br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><img src="1.jpg" align="right" border="3" alt="图片说明文字"> </span></pre><div class="contentsignin">Copier après la connexion</div></div> src: 图片路径 <br> align: 对齐方式 <br> border: 边框粗细 <br> <p class="sycode"> 图像地图<map>： <br> 在<img alt="体育生学编程--html学习_html/css_WEB-ITnose" >标签中使用usemap属性，指定图像可以用作地图 <br> 使用<map>及<area>标签可以把图像的一部分作为超链接 <br> </map></map></p> <p class="sycode"> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><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></pre><div class="contentsignin">Copier après la connexion</div></div> <br> <h2>7、框架<frameset></frameset> </h2> <p class="sycode"> 框架集合标签</p> <frameset>： <br> <frameset>中可以放入多个<frame>框架，把页面分成几个部分 <br> <frameset>不能放在body中 <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><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></pre><div class="contentsignin">Copier après la connexion</div></div> rows：框架集合每行的高度 <br> cols：框架集合每列的宽度 <br> src：框架中显示的页面 <br> name：框架的名字，可用做超链接的target <p class="sycode"> <br> </p> <p class="sycode"> 内联框架<iframe>： <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><iframe src="1.html">抱歉,您的浏览器无法显示iframe标签</iframe> <iframe src="2.html">抱歉,您的浏览器无法显示iframe标签</iframe></span></pre><div class="contentsignin">Copier après la connexion</div></div> 可以在页面中嵌入另一个页面 <br> src：要嵌入的页面 <br> innerHTML：如果浏览器无法显示iframe，则会显示该文本 <br> </iframe></p> <h2>8、表格</h2> <table> <p class="sycode"> 表格标签</p> <table>： <br> <caption> 标题 <br> </caption> <tr> 表格中的一行 <br> <td> 放在</td> </tr> <tr>中代表一个单元格 <br> <th> 类似</th> </tr> <tr>通常用在第一行或最后一行 <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><table border="1" width="40%">  <caption>表格标题</caption> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr algin="”center”"> <td>张三</td> <td>23</td> </tr> </table></span></pre><div class="contentsignin">Copier après la connexion</div></div> <br> <p class="sycode"> 多行多列</p> <td>： <br> colspan属性：控制一个单元格占多列 <br> rowspan属性：控制一个单元格占多行 <p class="sycode"> <thead>、</thead></p> </td> </tr> <tbody>、</tbody> <tfoot>： <br> 三个标签都是放在table下，内部可以放tr标签 <br> <thead> 表头，通常用在第一行 <br> </thead> </tfoot> <tbody> 表体，表格中间的内容，可以有多个 <br> </tbody> <tfoot> 表脚，通常用在最后一行 <br> <br> <br> <h2>9、表单</h2> <form>重要<input> <p class="sycode"> 表单标签</p> </form> <form>： <br> 内部可以包含文本框、单选、多选、下拉列表等表单项 <br> 可以把用户在页面中的输入和选择提交到一个地址 <br> 常用属性： <br> action：提交地址 <br> method：提交方式 <p class="sycode"> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><form action="%E8%A6%81%E6%8F%90%E4%BA%A4%E7%9A%84%E5%9C%B0%E5%9D%80" method="get"> <input type="text" name="username"> <input type="password" name="password"> </form></span></pre><div class="contentsignin">Copier après la connexion</div></div> <br> <p class="sycode"> 输入项<input>： <br> 通过指定type属性可以定义不同的输入项： <br> text：普通文本框 <br> password：密码框 <br> radio：单选按钮 <br> checkbox：多选按钮 <br> file：文件 <br> hidden：隐藏字段 <br> submit：文本提交按钮 <br> image：图片提交按钮 <br> reset：重置按钮 <br> button：普通按钮 <br> </p> <p class="sycode"> 下拉列表<select> <br> 默认为单选，multipe属性指定是否为多选 <br> size属性指定显示个数 <br> 内部用<option>标签指定其中选项 <br> </option></select></p> <p class="sycode"> 文本域<textarea> <br> rows属性指定行数 <br> cols属性指定列数 <br> 标签<label> <br> 可以用来方便点击或者设置快捷键 <br> <label><input type="radio"> 男</label> <br> <label for="user" accesskey="u">用户名(u)</label> <br> <input type="text" id="user"> <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><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">  <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> </table> <input type="hidden" name="xxx" value="ssss"> </form></span></pre><div class="contentsignin">Copier après la connexion</div></div> <br> <br> <br> </label></textarea></p> <h2>10、注释 特殊字符</h2> <p class="sycode"> 特殊字符： <br> 一些特殊符号，比如 & 等，在代码中会被浏览器识别并解释 <br> 所以用一些特殊的方式来表示 </p> <p class="sycode"> <br> </p> <p class="sycode"> </p> <p class="sycode"> 注释用 </p> <p class="sycode"> </p> <h2> </h2> <br> </form> </tfoot> </table> </table> </frameset> </frameset> </frameset> </dd> </dl>