Web前端学习笔记1——基础的HTML5

目录

1. 超链接

2. 特殊符号

3. 列表 

 4. 其他常用标签

 5. meta和link标签 

6. 表格标签

7. 基础表单

---

HTML: 提供网页上显示的内容(结构)

CSS: 美化网页(样式)

JavaScript:控制网页行为(行为)

设计原则：结构 样式 行为分离

 

主要记录的是JavaScript学习过程中HTML的一些常用标签

1. 超链接

——锚点

<p id="sd">你好啊 我是谁!</p>
.........
<a href="#sd">锚点</a>

点击该锚点即可定位到id为“sd”的位置

2. 特殊符号

&nbsp;  空格    &lt;  <     &gt;  >

3. 列表 

------- 前面的 ·啊,数字序列啊 后面都要干掉

——无序列表

<!-- ul只能放li标签,li里面可以放一些其他的诸如<p>标签之类的-->
<ul>
    <li>你是谁</li>
    <li>哈咯</li>
    <li>我是zxl</li>
</ul>

——有序列表 

<ol>
    <li>小张</li>
    <li>喜欢</li>
    <li>学软件</li>
</ol>

—— 自定义列表

<dl>
    <dt>标题哦</dt>
    <dd>我是1</dd>
    <dd>我是2</dd>
    <dd>我是3</dd>
    <dd>我是4</dd>
</dl>

 4. 其他常用标签

   <span></span> 行内元素   显示在一行上面

    <strong>加粗</strong> <p></p>
    <em>斜体</em>         <p></p>
    <ins>下划线</ins>     <p></p>
    <del>删除线</del>     <p></p>
    2<sup>3</sup>        <p></p>       上标
    H<sub>2</sub>O       <p></p>       下标

 5. meta和link标签 

    <!-- 编码-->
    <meta charset="UTF-8">
    <!-- 关键字  浏览器搜索-->
    <meta name="keywords" content="Java学习">
    <!-- 网页描述 描述网页内容-->
    <meta name="description" content="描述网页的哦——————————————哈哈哈">
    <!-- 重定向跳转 1秒后跳到百度网站-->
    <meta http-equiv="refresh" content="1;http://www.baidu.com"/>
    <!-- 链接外部样式表文件-->
    <link rel="stylesheet" href="test.css">
    <!-- icon图标 图标位于标题文字前-->
    <link rel="icon" href="favicon.ico">

6. 表格标签

    <!--
       border 表格边线框的宽度
       cellspacing 单元格之间空隙的距离
       cellpadding 内容到边框的距离
       width height 长宽
       align="center" 表示的是在父亲组件的对齐方式 文字相对于单元格 表格相对于屏幕(高无限大 所以屏幕居中 是水平居中)
       row = 行 
    -->
    <table border="10" width="500" height = "400" cellspacing="0"
            cellpadding="20" align="center">
        <!-- tr 行标签-->
        <tr>
            <!-- td 列标签-->
            <td align="center">张三</td>
            <td>20</td>
            <td>男</td>
        </tr>

        <tr align="center">
            <td>小丽</td>
            <td>小王</td>
            <td>女</td>
        </tr>
    </table>

表格标准结构：

   <!--表格标准结构-->
    <table>
        <thead></thead>
        <tbody></tbody>
        <tfoot></tfoot>
    </table>

 表头标签以及单元格合并：

    <table border="1" cellspacing="0" width="600" >
        <!-- 表头 caption-->
        <caption> 学生名单表</caption>
        <thead align="center">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody align="center">
            <!-- colspan 列合并  column 列-->
            <tr>
                <td colspan="2">小李</td>
            </tr>

            <!-- rowspan 行合并 row 行-->
            <tr>
                <td>小李</td>
                <td rowspan="2">131</td>
            </tr>

            <tr>
                <td>小李</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>

表单标题以及内容垂直对齐方式

    <!-- th 表格标题  bordercolor  边框颜色
         valgin = "top | middle | bottom" 内容垂直对齐方式
     -->
    <table border="1" bordercolor = "green" width="400" height = "300" cellspacing="0" >
        <tr>
            <th >姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>

        <tr >
            <td valign="top">小丽</td>
            <td>22</td>
            <td valign="middle">女</td>
        </tr>
    </table>

细线表格

由于border = 1 相当于是2px,2个像素点。所以给border宽度设置1，那么很宽，通过设置背景 设置cellspacing可以解决。

    <table bgcolor="green" width="400" height = "200" cellspacing="1" align="center">
        <caption>超级课程表</caption>
        <tr bgcolor="white">
            <th colspan="2"></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr bgcolor="white" align="center">
            <td rowspan="2" width="60">上午</td>
            <td width="40">1</td>
            <td>化学</td>
            <td>物理</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <tr bgcolor="white" align="center">
            <td>2</td>
            <td>数学</td>
            <td>语文</td>
            <td>化学</td>
            <td>物理</td>
            <td>英语</td>
        </tr>
        <tr bgcolor="white" align="center">
            <td rowspan="2">下午</td>
            <td>1</td>
            <td>化学</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>物理</td>
        </tr>
        <tr bgcolor="white" align="center">
            <td>2</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>物理</td>
            <td>化学</td>
        </tr>
    </table>

7. 基础表单

    <!-- form 表单标签
         action 处理信息的地址
         method 提交请求方式
         type  text 文本 ;
               submit 提交按钮; radio 单选框 值得注意的是name必须一致
                                      checked ="checked" 设置默认选中
               name 参数名;value 具体数值
               checkbox 多选框

    -->
    <form action="http://www.baidu.com" method="get">
        用户名:<input type="text" name="username" maxlength="10" value="你是谁" >
        <br/>
        密&nbsp;码:&nbsp;<input type="text" name="password" >
        <br/>
        男<input type="radio" name="sex" checked ="checked">  &nbsp;&nbsp;女<input type="radio" name="sex">
        <br/>
        爱好:  唱歌<input type="checkbox" name="sing"> &nbsp;&nbsp;
              跳舞<input type="checkbox" name="dance"> &nbsp;&nbsp;
              游泳<input type="checkbox" name="swim">
        <br/>
        <input type="submit">
    </form>

下拉选择：

    省(市): <select>
        <option>江苏</option>
        <option>江西</option>
        <option>湖北</option>
        <option selected = selected>湖南</option>
    </select>
    <br/>
    <br/>
    市区:
    <select>
        <optgroup label="江苏">
            <option>常州</option>
            <option>镇江</option>
            <option>南京</option>
        </optgroup>
    </select>

多行文本以及文本上传

    <!-- 多行文本-->
    <textarea
        cols="130"
        rows="10">
    </textarea>
    <br/>
    <!-- 文本选择-->
    <input type="file">

    <!-- 普通按钮  不能提交信息,配合JS使用-->
    <input type="button" value="普通按钮">
    
    <!-- form分组标签-->
    <fieldset>
        <legend> 分组 </legend>
    </fieldset>