html+css 简略使用

HTML常用标签

<br/>

​ 单标签，换行。

<hr/>

​ 单标签，水平线。

<h1></h1>

​ 双标签，用来设置标题的大小。从h1-h6越来越小。

<div></div>

​ 双标签，盒子标签，默认独占一行。

<span></span>

​ 双标签，块标签，长度是封装数据的长度。

<p></p>

​ 双标签，段落标签，默认换行。

<font color="颜色" face="字体" size="大小"></font>

​ 双标签，设置字体属性，其中size属性最大值为7，更大只显示为7。

<a href="超链接地址" target="跳转形式"></a>

​ 双标签，里面一般放超链接，target属性可以设置_self 或_blank，其中_self代表在本页面跳转， _blank代表重新打开一个页面。

<ul></ul>

​ 双标签，无序列表。其中type属性可以修改前面的符号。

<li></li>

​ 双标签，列表项。

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

<ol></ol>

​ 双标签，有序列表。 其中type属性可以修改前面的符号。

<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>

<img src="路径" width="长度" height="宽度" border="图片边框宽度" alt="图片找不到时显示的内容"/>

​ 单表签 ，插入图片时使用。

​ 绝对路径：

​ http://ip:port/工程名/资源路径

​ 相对路径：

​ ./表示当前路径 ../表示返回到上一层目录

table表格

<table border="边框大小" width="表格宽" height="表格高" cellspacing="单元格间距"></table>

​ 双标签，设置表格。

<tr></tr>

​ 双标签，行标签。

<td></td>

​ 双标签，单元格标签。

<th></th>

​ 双标签，表头标签。

colspan

​ 属性，合并列。放到td中。

rowspan

​ 属性，合并行。放到td中。

<!--五行五列-->
<table border="1" cellspacing="0" width="300" height="400">
   <tr>
       <td colspan="2">1</td><td>3</td><td>4</td><td>5</td>
   </tr>
    <tr>
        <td>1</td><td>2</td><td>3</td><td>4</td><td rowspan="2">5</td>
    </tr>
    <tr>
        <td>1</td><td>2</td><td>3</td><td>4</td>
    </tr>
    <tr>
        <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
    </tr>
</table>

border

​ 属性，设置边框宽度。

cellspacing

​ 属性，设置单元格之间间距。

iframe

<iframe src="当前显示的页面路径" width="窗口宽度" height="窗口高度" ></iframe>

​ iframe可以在页面上开辟一个小区域显示单独的页面。

​ iframe和a标签组合使用步骤：

​ 1、在iframe标签中使用name属性定义一个名称。

​ 2、在a标签的target属性上设置iframe的name的属性值。

测试iframe
<hr/>
<iframe src="Test.html" width="400" height="400" name="test" ></iframe>
    <hr/>
<ul type="none">
    <li ><a href="https://www.taobao.com/" target="test">测试1</a><li>
    <li ><a href="https://www.bilibili.com/" target="test">测试2</a><li>
</ul>

form表单

<form action="提交到的服务器地址" method="提交方式"></form>

​ form中存放用户需要提交的表单。

​ action里面存放表单要提交到的服务器地址。

​ method里面设置了表单的提交方式。如果不设置，默认值为get。

​ 使用get提交方式不安全，提交后，在链接内可以看到表单内所有设 置了name属性的属性内容,并且get提交方式提交值的最大长度100字 符。post提交表单的方式是安全的。不会 暴漏用户信息。

​ 表单提交的时候，数据没有发送给服务器的三种情况：

​ 1、表单项没有name属性值。

​ 2、单选、复选、下拉列表的option标签，都需要加value属性。

​ 3、表单项不在form标签中。

​ <input type="text" value="默认值"/>

​ 文件输入框，value设置默认显示内容。

​ <input type="password" value="默认值"/>

​ 密码输入框，value设置默认显示内容。

​ <input type="radio" name="按name进行分组" checked="checked"/>

​ 单选框，name表示分组属性，多个radio则只可以选择一个，checked表示该框默认被选中。

​ <input type="checkbox" checked="checked">

​ 复选框，checked表示该框默认被选中。

​ <select></select>

​ 下拉框，和option配合使用。

​ <option selected="selected"></option>

​ 下拉框中的可选项，放在select双标签中使用。selected表示 默认选中该项。

​ <textaera rows="默认显示行数" cols="默认显示字符宽度">默认内容</textaera>

​ 多行输入文本框，rows默认显示行数，clos默认显示字符宽 度。

​ <input type="reset" value="默认值"/>

​ 重置按钮。重置为表单的默认值。

​ <input type="submit" value="默认值"/>

​ 提交按钮。

​ <input type="button" value="默认值"/>

​ 按钮。

​ <input file="" />

​ 文件上传域。

​ <input type="hidden" name="" value="默认值"/>

​ 隐藏域，当我们要发送某些信息，这些信息，不需要用户输入，就可以使用隐藏域。(提交的时候发送给服务器)

​

<form action="localhost.8080" method="get">
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名：</td>
            <td><input type="text" value="张三" name="username"/></td>
        </tr>
        <tr>
            <td> 密码：</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td> 男<input type="radio" name="sex" checked="checked"/>
                 女<input type="radio" name="sex" /></td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>唱歌  <input type="checkbox" checked="checked"/>
                跳舞  <input type="checkbox"/>
                打篮球 <input type="checkbox"/></td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td><select>
                <option name="美国">美国</option>
                <option name="中国" selected="selected">中国</option>
                <option name="韩国">韩国</option>
                <option name="加拿大">加拿大</option>
            </select></td>
        </tr>
        <tr>
            <td>用户留言：</td>
            <td> <textarea rows="10" cols="20">请输入。。。</textarea></td>
        </tr>
        <tr>
            <td colspan="2" align="center"> <input type="reset" value="重置"/></td>

        </tr>
        <tr>
            <td colspan="2" align="center"><input type="submit" value="提交"/></td>

        </tr>
        <tr>
            <td colspan="2" align="center"><input type="button" value="按钮"/></td>

        </tr>
        <tr>
            <td >上传文件</td>
            <td><input type="file"></td>
        </tr>
        <tr>
            <td><input type="hidden" name="隐藏域" value="默认值"/></td>
            <td> </td>
        </tr>
    </table>

</form>

HTML引入CSS样式

使用css文件形式分为三种：

​ 嵌入式：

​ 优先级最高，代码写在html标签中。

​ 内联式：

​ 优先级次之，代码写在head标签中。

​ 外联式：

​ 优先级最低，代码写在外部css文件，在head标签通过link引用。

CSS选择器

css选择器共有三种：

​ 标签选择器：

​ 直接在head标签里设置标签css样式，css的样式名称就是标签名。html相应的标签直接自适应css样式。

----------------head标签中style标签下-----------------
div{
		border:3px solid red;
		color:red;
		font-size:5px;
}

​ id选择器：

​ css的样式名称是”#样式名称“。html标签通过id="样式名称"引用。

----------------head标签中style标签下-----------------
#id001{
		border:3px solid red;
		color:red;
		font-size:5px;
}
----------------html标签中---------------------------
<div id="id001"></div>

​ class选择器：

​ css的样式名称是”.样式名称“。html标签通过class="样式名称"引用。

----------------head标签中style标签下-----------------
.class001{
		border:3px solid red;
		color:red;
		font-size:5px;
}
----------------html标签中---------------------------
<div class="class001"></div>

css样式中常用属性

clolor:red;

​ 修改字体颜色。

width:100px;heigth:100px;

​ 设置宽度和高度。

border:1px solid red;

​ 设置边框宽度，边框样式，边框颜色。

background-color:red;

​ 设置背景颜色。

font-size:10px;

​ 设置字体大小。

margin-left:auto;margin-right:auto;

​ div居中。

text-align:center;

​ 文本居中。

text-decoration:none;

​ 去除超链接下划线。

border-collapse:collapse;

​ 将边框合并。视觉上更好。

list-style:none;

​ 去除列表的列表头修饰。