スポーツ学生のプログラミング --html learning_html/css_WEB-ITnose

HTML学習

1. HTML入門(とにかく理解する)

HTML (Hyper Text Markup Language):
HTMLはHyper Text Markup Languageの略で、最も基本的なWebページ言語です

HTMLのバージョン:
2.0 (IETF)、3.0 (W3C)、4.01 (W3C)、5.0 (W3C)
IETF: Internet Engineering Task Force
W3C: World Wide Web Consortium

HTML の特徴:
タグとコードによって定義される言語ですはタグで定義されており、コードは大文字と小文字を区別する必要はありません
で始まり で終わります
ヘッダー部分

の 2 つの部分で構成されます。そしてボディ部分
ヘッダー部分はHTMLページに補助情報や属性情報を追加する部分であり、その中のコンテンツが最初にロードされます
ボディ部分はページデータが実際に保存される場所です

HTML タグ:
ほとんどのタグには、開始タグ と 終了タグ があります。例:

段落 段落

単一の機能しか持たない、または変更するコンテンツがないため、 タグ内で終わる可能性があります。 。例: line Break
分割線

---

スラッシュは省略可能です

HTMLタグの属性:
タグ より豊富な操作を行うには、タグ内の属性を使用します
属性値を変更することで、より多くの効果オプションが追加されます
属性名と属性値を接続するには、「=」を使用します
属性値には二重引用符、一重引用符を使用できます 引用符、引用符なし、通常は二重引用符 (または社内規定の記述基準)

ヘッダー タグ

：
        中可以放入多个框架，把页面分成几个部分
        不能放在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

内联框架

8、表格

表格标签

：
        表格中的一行
        中代表一个单元格
        通常用在第一行或最后一行

<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>

多行多列

、

、：
        三个标签都是放在table下，内部可以放tr标签
        表头，通常用在第一行
        表体，表格中间的内容，可以有多个
        表脚，通常用在最后一行       

9、表单

重要

表单标签

：
        内部可以包含文本框、单选、多选、下拉列表等表单项
        可以把用户在页面中的输入和选择提交到一个地址
        常用属性：
        action：提交地址
method：提交方式

<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>

输入项：
        通过指定type属性可以定义不同的输入项：
text：普通文本框
password：密码框
radio：单选按钮
checkbox：多选按钮
file：文件
hidden：隐藏字段
submit：文本提交按钮
image： 图片提交按钮
reset：重置按钮
button：普通按钮

下拉列表
      默认为单选，multipe属性指定是否为多选
        size属性指定显示个数
        内部用标签指定其中选项

文本域 <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>          <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> <br> <br> <br> </label>

10、注释 特殊字符

特殊字符：
        一些特殊符号，比如 & 等，在代码中会被浏览器识别并解释
        所以用一些特殊的方式来表示

注释用

 

放在

类似

：
        colspan属性：控制一个单元格占多列
        rowspan属性：控制一个单元格占多行