HTML基础

一、概念

HTML：超文本标记语言，顾名思义，超文本就是页面内可以包含图片、链接等非文字内容；标记就是使用标签的方法将需要的内容包括起来。

作用：编写网页。

特点：不需要进行编译，直接使用浏览器阅读即可。

      文件的扩展名是*.html或*.htm

      结构是由标签组成的，不区分大小写，标签由开始标签和结束标签组成，如果没有结束标签就已/结尾

      结构包括两部分：头head体body

二、排版标签

1)标题标签：<hn>内容</hn>n在1~6之间，n越大，标题越小

<h1>公司简介</h1>

2)水平分割线：<hr/> 属性：size noshade color width align

<hr/>
<hr></hr>

3)字体标签：<font>内容</font> 属性：size(最大为7) face字体 color

<font color="red">向着光亮那方</font>

4)换行：<br/> 若键盘上的回车，只产生一个空格

<br/>

5)段落：<p>内容</p> 这就是一段

<p>偶尔走在北京的人海里</p>

6)粗体：<b>  斜体<i> 下划线<u>

三、图片标签

src：图片位置  title：鼠标悬停时显示  alt：图片加载不出来时显示

<img src="../img/header.jpg" title="天气预报" width="200px" height="50px" alt="未加载出来"   />

四、超链接

href：要链接到的网页

target：打开方式（_blank：新打开一个网页 _self：在本网页上打开 _parent：打开父网页）

<a href="http://www.baidu.com" target="_blank">百度一下</a>

五、列表标签

有序标签：ol type :1 a A i I   li：代表一项

<ul type="square">
<li>你好</li>
<li>我好</li>
<li>大家好</li>
</ul>

无序标签：ul type：desc circle square

<ol type="i">
<li>昨天</li>
<li>今天</li>
<li>明天</li>
</ol>

六、表格标签

table：属性：border width cellspacing：单元格间距离  cellpadding：单元格与内容间距离 bgcolor

th：表头

tr：行

td：列  rowspan：合并行  colspan：合并列  nowrap：是否折行

<table>
<tr>
<td>关于我们</td>
<td>配送方式</td>
<td>服务声明</td>
</tr>
</table>

七、框架集标签

框架集：frameset将不同页面组成一个页面，不可与body共存，可以嵌套使用

        rows：上下结构   cols：左右结构   rows或cols可以用确定像素或*或百分比表示

主页面：

<frameset rows="200px,*">
<frame src="top.html"/>
<frameset cols="300px,*">
<frame src="middle.html"></frame>
<frame src="bottom.html" name="bot"/>
</frameset>
</frameset>

middle.html页面：

<!--点击此页的超链接后在name="bot"的页面中显示链接内容-->
<a href="https://www.baidu.com/" target="bot">百度一下</a>

八、form

form：提交数据需有表单，数据必须放在表单中

action：提交到服务器位置 #：本页面

method：提交方式

        get：提交数据会以键值对的形式拼接在地址栏中，键值对间用&隔开，第一个用?隔开，长度有限

        post：数据不会显示到地址栏，长度任意

input控件：

<form action="#" method="get">
<!--text:直接显示输入的文本-->
用户名：<input type="text" name="username" value="222" size="30" readonly="readonly" /><br />
<!--password：以密码形式*存在-->
密码：<input type="password" naem="password" maxlength="5"/><br />
<!--radio：单选按钮-->
性别：<input type="radio" name="sex" value="0" checked="checked"/>男
<input type="radio" name="sex" value="1"/>女<br />
<!--checkbox：以多选框形式出现-->
兴趣爱好：<input type="checkbox" name="hobby" value="0"/>吃饭
<input type="checkbox" name="bobby" value="1"/>睡觉
<input type="checkbox" name="bobby" value="2"/>打豆豆<br />
<!--file：以上传文件形式出现-->
照片：<input type="file" name="picture"/><br />
验证码：<input type="text" name="againNum" disabled="disabled"/> <input type="image" src="../img/logo.gif" /><br />
<!--submit：将整个页面内容提交到服务器-->
<input type="submit" value="注册"/>
reset：恢复最开始状态，不等于清空
<input type="reset" value="重置"/><br />
</form>

textarea控件：cols rows name value为标签里内容

<!--文本输入框-->
<textarea cols="40px" rows="10px" name="text"></textarea><br />

select控件：下拉框 name multiple(多选择) size(显示个数)

            option下拉选项 value selected(默认选项)

<!--选择框-->
<select name="select" multiple="multiple" size="3">
<option value="0">小学</option>
<option value="1" selected="selected">初中</option>
<option value="2">高中</option>
</select>

小结：

HTML页面是网页中最简单的，也是我们今后学习网页的基础，每个知识点都比较琐碎，所以更加需要在实践中多敲代码，多应用。