html笔记

html

一、超链接

外链接语法格式：

 <a href="地址"></a>   <!--href为必填属性-->

内链接语法格式：

 <a href="#tiaozhuan">跳转到本页中的人物介绍模块</a>  <!--通过id选择器 id名前要加#号 -->
...
 <h2 id="tiaozhuan">人物介绍模块</h2>

二、表格

    <table border="1" align="center">   <!---->
        <thead>  <!--标识表格头部区域--> 
            <tr> 	  <!--tr:table row 标识表格的一行-->
                <th colspan="3">   <!-- 合并列  th标识表头 -->
                    XXX信息表
                </th>
            </tr>
        </thead>
        <tbody>  <!-- 标识表格身体区域 -->
            <tr>
                <td>   <!-- td:table data 表格数据 -->
                    wewe
                </td>
                <td> 
                    wewe
                </td>
                <td rowspan="2">    <!-- 合并行 -->
                    wewe
                </td>
            </tr>
            <tr>
                <td>
                    wewe
                </td>
                <td>
                    wewe
                </td>
            </tr>
        </tbody>
    </table>

样式：

三、列表

3.1 无序列表

注意：ul 标签内之内只能嵌套 li 标签,在 ul 标签中输入其他标签或文字是不被允许的，li 标签中可以容纳任何元素。

  <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
 </ul>

样式：

3.2 有序列表

注意：ol 标签内之内只能嵌套 li 标签,在 ol 标签中输入其他标签或文字是不被允许的，li 标签中可以容纳任何元素。

 <ol>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
 </ol>

样式：

3.3 自定义列表

使用场景: 自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
注意：dl 标签内之内只能嵌套 dt、dd 标签,在 dl 标签中输入其他标签或文字是不被允许的。 dt、dd 标签中可以容纳任何元素。

    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>小米之家</dd>
    </dl>

样式：

四、表单

4.1 form表单域

form 标签定义表单域，以实现用户信息的收集与传递，会将范围内的表单元素信息提交给服务器。
表单相关控件有：input输入表单元素、select下拉表单元素、textarea文本域元素。

 <form action="url地址" method="提交方式" name="表单域名称">
        各类表单元素控件
 </form>

4.2 input类型

在 HTML 中，input 标签没有结束标签。在 XHTML 中，input标签必须被正确地关闭，以 / 结束。
input表单控件中，type为必填，相关属性见下表。

type属性	描述
button	定义可点击按钮
checkbox	定义复选框
file	定义输入字段和"浏览"按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图片形式的提交按钮
password	定义密码字段。该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中的所有数据
submit	定义提交按钮。提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可以在其中输入文本。默认宽度为20个字符

除type属性外，input标签还有很多属性，其常用属性如下：

input属性	属性值	描述
type	见上表	必填，见上表
name	由用户自定义	定义input元素的名称，后端通过name找到对应表单
value	由用户自定义	规定input元素的值，绑定的value可提交到服务器
placeholder	由用户自定义	text\password文本框中特有，提示文本
checked	checked	规定input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度
minlength	正整数	规定输入字符中的字符的最大长度

       <form action="xxx.php" method="get">
        <!-- text 文本框 用户可以里面输入任何文字 -->

        用户名: <input type="text" name="username" value="绑定的值" maxlength="6"> <br>

        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd" placeholder="请输入密码"> <br>

        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 
        男 <input type="radio" name="sex" value="男">
        女 <input type="radio" name="sex" value="女" checked="checked"><br>
        
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭">
        睡觉 <input type="checkbox" name="hobby">
        打豆豆 <input type="checkbox" name="hobby" checked="checked">
        <br>

        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">

        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">

        <!-- 普通按钮 button  后期结合js 搭配使用-->
        <input type="button" value="获取短信验证码"> <br>

        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像: <input type="file">
    </form>

样式：

4.3 label标签

label 标签用于绑定一个表单元素 当点击 label 标签内的文本时,浏览器就会自动将焦点(光标转到或者选择对应的表单元素上,用来增加用户体验。

    <form>
        <!-- 核心: label 标签的for属性应当与相关元素的id属性相同。 -->
        性別：
        <label for="man"> 男</label>
        <input type="radio" name="sex" id="man">
        <label for="woman"> 女</label>
        <input type="radio" name="sex" id="woman">
    </form>

样式：

4.4 select下拉框

 <form>
        <select>
            <option>选项1</option>
            <option selected="selected">选项2</option> <!--默认选中的选项-->
            <option>选项3</option>
        </select>
    </form>

样式：

4.5 textarea文本域

    <form>
        <textarea rows="3" cols="20"></textarea> <!--一般用css指定宽高-->
    </form>

样式:

五、元素显示模式

html元素一般分为块元素和行内元素。有些资料还加上了行内块元素。

元素模式	元素排列	设置样式	默认宽度	包含
块元素	一行只能放一个块元素	可以设置宽高	父容器的100%	容器可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	本身内容的宽度

5.1 块元素

常见的块元素有h1~h6、p、div、ul、ol、li 等，其中 div 标签是最典型的块元素。

块级元素的特点∶
1、比较霸道，自己独占一行。
2、高度，宽度、外边距以及内边距都可以控制。
3、宽度默认是容器（父级宽度) 的100%。
4、是一个容器及盒子，里面可以放行内或者块级元素。

注意∶
文字类的元素内不能使用块级元素
p 标签主要用于存放文字，因此 p 里面不能放块级元素，特别是不能放 div 同理，h1 ~ h6 等都是文字类块级标签，里面也不能放其他块级元素。

5.2 行内元素

常见的行内元素有 a、strong、b、em、i、del、s、ins、U、span等，其中 span 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点∶
1、相邻行内元素在一行上，一行可以显示多个。
2、高、宽直接设置是无效的。
3、默认宽度就是它本身内容的宽度。
4、行内元素只能容纳文本或其他行内元素。

注意∶
链接里面不能再放链接
特殊情况链接 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全。

5.3 行内块元素

在行内元素中有几个特殊的标签：img 、input 、td，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点∶
1、和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。
2、一行可以显示多个(行内元素特点)。默认宽度就是它本身内容的宽度（行内元素特点)。
3、高度，行高、外边距以及内边距都可以控制(块级元素特点)。