> 웹 프론트엔드 > HTML 튜토리얼 > 体育生学编程--html学习_html/css_WEB-ITnose

体育生学编程--html学习_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:49:39
원래의
981명이 탐색했습니다.

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">로그인 후 복사</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">로그인 후 복사</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">로그인 후 복사</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">로그인 후 복사</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">로그인 후 복사</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">로그인 후 복사</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">로그인 후 복사</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">로그인 후 복사</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%"> <!-- 40%会岁窗体大小变化 --> <caption>表格标题</caption> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr algin="”center”"> <td>张三</td> <td>23</td> </tr> </table></span></pre><div class="contentsignin">로그인 후 복사</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">로그인 후 복사</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"> <!--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></pre><div class="contentsignin">로그인 후 복사</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>
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿