0822_浅学html

1.超级链接

普通的链接：<a href="http://www.baidu.com" target="_self">百度一下</a><br>
图像链接：<a href="http://www.baidu.com"><img width="150" src="img/libai.jpeg" alt="这是刺客李白" title="青莲剑仙"></a><br>
邮件链接：<a href="mailto:123456@qq.com">站长信箱</a><br>

锚记链接： <a id="tips">提示部分</a>
           <a href="#tips">跳到提示部分</a>

2.  块级元素：自占一行，自带换行功能   div,h,p,form,ul,ol...

    行级元素：自己没有换行功能     a,span,del,sub,sup,em,b,strong...

<div>文档中的块级元素</div>
<span>文档中的行级元素</span>

 3.  列表

无序列表：
        <ul>
            <li>项目1</li>
            <li>项目2</li>
        </ul>
有序列表
        <ol type="A">
            <li>项目1</li>
            <li>项目2</li>
        </ol>
自定义列表
        <dl>
            <dt>项目1</dt>
            <dd>描述项目1</dd>
            <dt>项目2</dt>
            <dd>描述项目2</dd>
        </dl>

 4.表格

<table border="1" cellpadding="10" cellspacing="0" width="400">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td align="center">1001</td>
                    <td>aa</td>
                    <td rowspan="4">跨行文本</td>
                </tr>
                <tr>
                    <td>1002</td>
                    <td>bb</td>
                </tr>
                <tr>
                    <td>1003</td>
                    <td>cc</td>
                </tr>
                <tr>
                    <td>1004</td>
                    <td>dd</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">跨列文本</td>
                </tr>
            </tfoot>
        </table>

<tr>表示有多少行;

cellpadding = 10   表格单元边界与单元内容之间的间距为10

cellspacing = 10   表格单元格间距为10

 

5. css层叠样式表

<!-- 1.行内样式 -->
        <p style="background-color: red;">我是P标签</p>
<!-- 2.内联样式 -->
        <style>
            h1 {
                background-color: green;
            }
        <h1>我是h1标签</h1>
        </style>
<!-- 3.外部样式 -->
        <link rel="stylesheet" href="css/style.css">

6. 选择器(部分).

/* 类选择器 */
            .fontStyle {
                color: red;
                font-size: 20px;
            }
            .backgroudStyle {
                background-color: yellow;
            }
/* id选择器，每个标签元素的id是唯一不能重复 */
            #fontStyle2 {
                color: blue;
                font-size: 30px;
            }
/* 标签选择器 */
            p {
                font-family: "仿宋";
            }
/* 通配符，全部选择器
                页面初始化
            */
            * {
                margin:0;
                padding: 0;
            }
/*伪类选择器,设置偶数行的颜色*/
            li:nth-child(even){
            color: rgb(255, 0, 0);
        }

 7.

<form action="aaa" method="post">
    <p>
        <!-- 
            readonly和disabled区别：
            readonly可以提交到后台的
            disabled是不可以提交到后台的
         -->
                账号：<input type="text" name="username" maxlength="12"
                    placeholder="用户名为6-12位">
            </p>
            <p>
                密码：<input type="password" name="password" required="required" placeholder="密码必须是6位">
            </p>
            <p>
                性别：
                <input type="radio" name="gender" value="男" id="man">
                <label for="man">男</label>
                <input type="radio" name="gender" checked value="女" id="women">
                <label for="women">女</label>
            </p>
        <button type="submit">注册</button>
        <button type="reset">重写</button>
</form>

 required 规定必须在提交之前填写字段

lorem自动生成一段测试文本