web第一讲：html与css

web系列

1. 第一讲：html与css

---

web第一讲：html与css

目录

一、html

1.什么是html？

2.常用标签（参考自w3cschool）

3.特殊字符(见w3cschool参考手册)

二、css

1.什么是css

2.css如何与html进行结合

 3.css选择器种类

4.常用样式

---

一、html

1.什么是html？

超文本传输协议(Hyper Text Markup Language)简称html。

HTML主要通过标签来标记需要显示在网页中的各个部分。

网页文件本身是一种文本文件，通过在文本文件中添加标记符，来告诉浏览器如何显示内容(如文字的处理、页面的布局、图片的显示等等)。

2.常用标签（参考自w3cschool）

① 字体标签<font>

font标签一般用来修改文本的字体、颜色、大小。

• face：修改文本字体。
• color：修改文本颜色。
• border：修改文本大小。

示例：

<font face="宋体" color="red" size="7">我是字体标签</font>

② 标题标签<h1>--<h6>

h1-h6由大到小显示标题的大小，可通过设置align属性的值来设置对齐

• align=“left”：向左对齐。
• align=“right”：向右对齐。
• align=“center”：居中对齐。

③ 列表标签<ul> / <ol>

ul表示无序列表标签，ol表示有序列表标签。

<li>表示列表项标签。

示例：

<ul type="none"> <li>张三</li> <li>李四</li> <li>王五</li> <li>赵六</li> </ul>

④ 图片标签<img>

img标签可以在html页面上显示图片。

• src：设置图片的路径。
• width：设置宽度。
• height：设置高度。
• border：设置边框大小
• alt：当图片找不到时用来代替显示的文本内容

示例：

<img src="1.jpg" width="200" height="260" border="1" alt="图片找不到了"/>

⑤ 超链接<a>

在网页中点击后可以跳转的内容就是超链接。

• href：设置跳转的地址。
• target：设置通过何种方式进行跳转。
  • _self：当前页面。
  • _blank：打开新页面。

示例：

<a href="http://www.baidu.com" target="_self">在当前页面跳转到百度</a>

⑥ 内嵌窗口标签<iframe>

iframe标签可以在一个html页面上内嵌一个窗口，去加载单独的页面。

• src：单独页面的路径。
• width：窗口宽度。
• height：窗口高度。

一般情况下与<a>搭配使用，可将点击超链接后跳转的页面加载到iframe内嵌的窗口中。

1. 在iframe标签中使用name属性定义一个名称。
2. 设置<a>标签的target属性的值为iframe的name属性值。

注：iframe必须为双标签，否则后面的内容失效。 

示例：

<iframe src="3.html" width="500" height="400" name="abc"></iframe> <br/> 
<ul>
    <li><a href="0.html" target="abc">0.html</a></li> 
    <li><a href="1.html" target="abc">1.html</a></li> 
    <li><a href="2.html" target="abc">2.html</a></li>
</ul>

⑦ 表格标签<table>

可在html页面中显示表格。

table：表格标签。

• border：设置表格每个单元格的边框大小。
• width：设置表格宽度。
• height：设置表格高度。
• align：设置表格的对齐方式。
• cellspacing：设置单元格间距。

th：表头标签，默认加粗且居中。

tr：行标签。

td：单元格标签。

• colspan：设置跨列。
• rowspan：设置跨行。

示例： 

<table border="1" width="500" height="150" cellspacing="0">
	<tr>
		<th colspan="3">1.1</th>
		<th>1.4</th>
		<th>1.5</th>
	</tr>
	<tr>
		<td rowspan="2">2.1</td>
		<td>2.2</td>
		<td>2.3</td>
		<td>2.4</td>
		<td>2.5</td>
	</tr>
	<tr>
		<td>3.2</td>
		<td>3.3</td>
		<td>3.4</td>
		<td>3.5</td>
	</tr>
	<tr>
		<td>4.1</td>
		<td>4.2</td>
		<td>4.3</td>
		<td colspan="2" rowspan="2">4.4</td>
	</tr>
	<tr>
		<td>5.1</td>
		<td>5.2</td>
		<td>5.3</td>
	</tr>
</table>

 ⑧ 表单标签<form>

表单标签用来收集信息，并将收集到的信息的所有元素集合发送给服务器。

form标签中常用到的子标签：

1. 文本输入框：<input type="text">  value属性默认显示的内容。
2. 密码输入框：<input type="password">  value属性默认显示的内容。
3. 单选框：<input type="radio">  value属性默认显示的内容，name属性可将其进行分组、checked属性表示默认选中。
4. 复选框：<input type="checkbox">  value属性默认显示的内容，checked属性表示默认选中。
5. 重置按钮：<input type="reset"> value属性修改按钮文本。
6. 提交按钮：<input type="submit"> value属性修改按钮文本。
7. 按钮：<input type="button"> value属性修改按钮文本。
8. 文件上传域：<input type="file">。
9. 隐藏域：<input type="hidden"> 。
10. 下拉列表：<select>[<option></option>...]</select>   <option>中selected属性默认选中。
11. 多行文本输入框：<textarea> row表示显示几行，col表示每行显示几个字符。

属性：

• action：设置提交表单到哪个服务器地址。
• mothod：设置以何种方式提交，GET(默认)或POST。

 GET请求的特点是：

1. 浏览器地址栏中的地址是：action属性[+?+请求参数]，请求参数的格式是：name=value&name=value&....
2. 需要上传的数据显示在地址栏中，不安全。
3. 有一定的数据长度限制。

POST请求的特点：

1. 浏览器地址栏中只有action属性值。
2. 相对于GET请求来说更加安全。
3. 没有数据长度限制。

提交表单时，数据没有发送个服务器的原因：

1. 表单项没有设置name属性值。
2. 单选、复选框都需要添加value属性。

一般情况下与表格标签搭配使用，优化(格式化)表单页面。

示例：

<form action="http://localhost:8080" method="get">
    <input type="hidden" value="login" name="action">
    <h2 align="center">用户注册</h2>
    <table align="center">
        <tr>
            <td width="50">用户名称：</td>
            <td><input type="text" name="username" value="请输入您的名字"/></td>
        </tr>
        <tr>
            <td>输入密码：</td>
            <td><input type="password" name="password"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" name="password"/></td>
        </tr>
        <tr>
            <td>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</td>
            <td>
                <input value="boy" type="radio" name="sex" checked>男
                <input value="girl" type="radio" name="sex">女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td><input name="hub" value="java" type="checkbox"/>java
                <input name="hub" value="drink" type="checkbox"/>喝酒
                <input name="hub" value="smoke" type="checkbox"/>抽烟<br/>
                <input name="hub" value="tangtou" type="checkbox"/>烫头
                <input name="hub" value="wenshen" type="checkbox" checked="checked"/>文身
            </td>
        </tr>
        <tr>
            <td>国&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍：</td>
            <td>
                <select name="guoji">
                    <option value="none">--请选择国籍--</option>
                    <option selected value="zh">中国</option>
                    <option value="jp">日本</option>
                    <option value="xl">叙利亚</option>
                    <option value="cx">朝鲜</option>
                    <option value="am">美国</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea name="ziwopj" rows="5"></textarea><br/></td>
        </tr>
        <tr>
            <td></td>
            <td align="right">
                <input type="reset" value="重置" align="center"/>
                <input type="submit" value="提交" align="right"/>
            </td>
        </tr>
    </table>
</form>

⑨ 其他标签 

<span>：所占用的长度就是封装的数据长度

<p>：在段落上下方各空出一行来，若已有空行则不再空。

<div>：默认独占一行

3.特殊字符(见w3cschool参考手册)

二、css

1.什么是css

css是[层叠样式表单]。是用于(增强)控制网页样式并允许样式信息与网页内容分离的一种标记性语言。

2.css如何与html进行结合

①设置标签的style属性，修改标签样式

只能在单个标签中使用。

示例：

<div style="border: 2px solid red;">我是div</div>

②在html的head标签中使用style标签来定义css样式

只能在单个html中使用。

示例：

<style type="text/css">
	div{
		font-size: 30px;
		color: blue;
		border: 1px solid yellow;
	}
</style>

③将css样式写成单独的css文件中，在通过link标签引入使用

通过link引入css样式的所有html中都能使用。

引入示例：

<link rel="stylesheet" type="text/css" href="1.css">

 3.css选择器种类

①标签名选择器(可作用于标签名相同标签)：

标签名{

       属性：值；

}

②id选择器(可作用于id属性值相同的标签)

需将要修改样式的标签中定义id属性。

#id值{

      属性：值；

}

③class选择器(可作用于class属性值相同的标签)

需将要修改样式的标签中定义class属性。

.class值{

    属性：值;

}

④组合选择器

可让多个选择器共用同一个css样式代码

选择器1,选择器2,选择器3{

        属性：值;

}

注：多个属性声明需使用分号隔开，最后一条也尽量使用分号。且一般来说一行只声明一个属性。

4.常用样式

字体颜色：color；

字体大小：font-size；

背景：background-color；

宽度：width；

高度：height；

边框：border；

文本居中：text-align:center；

标签居中：margin-left:auto;margin-right:auto；

超链接去掉下划线：text-decoration:none;

列表去除修饰：ul{list-style:none;}

表格细线：

table{border:; border-collapse:collapse;}

td,th{border:;}