前端基础标签

1.特殊符号

尖角号
<左尖角号 >右尖角号
空格:
&nbsp:该空格占据宽度[字体]影响明显强烈
&emsp:占据的宽度正好是1个中文宽度,且基本上不受字体影响
版本: &copy
商标: &trade &reg

2.div和span标签

div:没有具体含义,用于划分页面区域,独占一行
span,没有实际意义,主要应用在对于文本独立修饰的时候,内容有多宽就占用多宽的空间距离

3.列表

列表-有序列表:

1.li里面可以随意放标签,但是ol里面只能防止li
2.数字是自动生成的
3.type: 1,a,A,i,I start:c(从如何开始取值只能是一个数字)

<ol type = "a">
	<li>有序列表</li>
</ol>

列表-无序列表

1.ul里面只能放li li 里面可以放其他标签
2.默认的是黑色的实心圆
3.type disc默认 circle空心圆 square正方形 none什么都没有(使用最多)

<ul>
	<li>无序列表<li>
<ul>	

列表-自定义列表

<dl>
	<dt>我是图片<dt>
	<dd>我是文字<dd>
<dl>	

4.图片标签

路径

./当前路径
…/跳出一级

图片标签属性

title = “鼠标悬停上去之后的提示信息”
alt = “图片不显示之后(加载失败)的提示信息”
width 宽度
height 高度

超链接标签

能够实现不同页面的跳转
内容
_blank:新窗口
_self:默认当前窗口
<a href=""> <img src="" alt=""> </a>

table表格

1.表格的基本结构

<table>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

2.表格的相关属性

1.宽度 width 2.高度 height 3.边框 border 4.边框颜色 bordercolor 5.背景颜色 bgcolor
6.水平对齐 align = "left或right"或center 7.cellspacing = “单元格与单元格之间的距离”
8.cellpadding = “单元格与内容之间的空隙”

<table border="1" width="50%" height="500px" align="center" bordercolor="red" bgcolor="blue" cellspacing="20"
       cellpadding="100">
       <tr>
           <td>1</td>
           <td>2</td>
       </tr>
       <tr>
           <td>3</td>
           <td>4</td>
       </tr>
   </table>

3.tr&td属性

1.高度 height 2.背景颜色 bgcolor 3.文字水平对齐 align = “left”/right center 4.文字垂直对齐 valign = “top”/middle 或 bottom
注释:如果一个单元格设置了宽度,影响的是整列的宽度

4.表格合并列

colspan = "所要合并的单元格的列数"必须给td
rowspan = "所要合并的单元格的行数"必须给td

 <table border="1" height="300" width="300">
        <tr>
            <td>不毛</td>
            <td colspan="2" rowspan="2" align="center">魏国</td>
            <!-- <td>辽国</td> -->
        </tr>
        <tr>
            <td rowspan="2" align="center">蜀国</td>
            <!-- <td colspan="2">西凉</td> -->
            <!-- <td>幽州</td> -->
        </tr>
        <tr>
            <!-- <td>南中</td> -->
            <td colspan="2" align="center">吴国</td>
            <!-- <td>荆州</td> -->
        </tr>
    </table>

表单标签

<form method = "get或者post" action = "向何处发送表单数据">

input:
A:属性 type 定义输入类型
a) 文本框 type = "text" 密码框 type = "password"
b) 提交框 type = "submit" 和 <button>提交按钮</button> 一样
c) 按钮框 type = "button" 单纯的按钮
d) 重置框 type = "reset" 清楚的效果
B:属性 placeholder 描述输入字段预期的简短的提示信息
C:属性 name 必须设置,否则在提交表单时,用户在其中输入的数据不会被发送给服务器
D:属性 value

  <form action="http://www.baidu.com" method="post">
       用户信息: <input type="text" placeholder="请输入你的用户名,注意大小=写" name="username"><br>
       密码: <input type="password" name="mima"><br>
       <!-- <input type="submit" value="登录"> -->
       <!-- 提交信息到 action指定的位置 -->
       <button type="submit">登录</button><br>
       <input type="reset" value="清空">
       <input type="button" value="aaaa">
   </form>