HTML学习

rain_czy02

已于 2023-06-10 15:08:20 修改

阅读量75

点赞数

文章标签： html

于 2023-06-09 23:30:04 首次发布

本文链接：https://blog.youkuaiyun.com/rain_czy02/article/details/131130274

版权

1.标题标签<h1></h1> - <h6></h6>

2.段落标签 <p></p>

3.换行标签 <br /> //反斜杠也可以省略，单标签

4.文本格式化标签

语义	标签	说明
加粗	<strong></strong>或者<b></b>	更推荐使用<strong>标签加粗，语义更强烈
倾斜	<em></em>或者<i></i>	更推荐使用<em>标签，语义更强烈
删除线	<del></del>或者<s></s>	更推荐使用<del>，语义更强烈
下划线	<ins></ins>或者<u></u>	更推荐使用<ins>，语义更强烈

5.<div>和<span>标签

其都没有语义，它们就是一个盒子，用来装内容

<div></div> ：单独占一行，大盒子

<span></span>：一行可以放置很多个<span>，小盒子

6.图像标签

<img src="图像URL" />：单标签

图像标签的其他属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放在图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

高度和宽度修改其一即可，另一个会等比缩放

图像标签使用注意点：

①图像标签可以拥有多个属性，必须写在标签名的后面

②属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开

③属性采取键值对的格式，即key="value"的格式，属性=”属性值"

7.相对路径与绝对路径

相对路径：以引用文件所在位置作为参考，而建立出的目录文件

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级，如<img src="1.jpg"/>
下一级路径	/	图像文件位于HTML文件下一级，如<img src="images/1.jpg />
上一级路径	../	图像文件位于HTML文件上一级，如<img src="../1.jpg"/>

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径

8.超链接标签

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

href：指定链接目标的url地址（必须属性）

target：用于指定链接页面的打开方式，其中_self为默认值（当前窗口打开），_blank为在新窗口中打开

链接分类：

①外部链接

②内部链接

③空链接 <a href="#">文本或图像</a>

④下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件

⑤网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频都可以添加超链接

⑥锚点链接：点击链接，可以快速定位到页面中的某个位置

·在链接文本的href属性中，设置属性值为 #名字的形式，如<a href="#two">第2集</a>

·找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第2集介绍</h3>

9.特殊字符

10.表格标签

    <table>
        <tr>
            <td>单元格内的文字</td>
            ...
        </tr>
        ...
    </table>

①<table></table>用于定义表格的标签

②<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中

③<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中

表头单元格标签

   <table>
        <tr>
            <th>姓名</th>
            ...
        </tr>
        ...
    </table>

<th></th>（table head）：一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示

表格属性（通常用CSS表示）

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250">
        <tr>
            <th>姓名</th> <th>性别</th> <th>年龄</th>
        </tr>

        <tr>
            <td>张三</td> <td>男</td> <td>17</td>
        </tr>

        <tr>
            <td>李四</td> <td>男</td> <td>18</td>
        </tr>

        <tr>
            <td>王五</td> <td>男</td> <td>18</td>
        </tr>
    </table>
</body>
</html>

运行结果：

表格结构标签

<thead></head>标签：表格的头部区域，用于定义表格的头部，其内部必须有<tr>标签

<tbody></tbody>标签：表格的主体区域，用于定义表格的主体，主要用于放数据本体。

以上标签都是放在<table></table>里

合并单元格

①合并单元格方式

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

②目标单元格（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码

跨列：最左侧单元格为目标单元格，写合并代码

11.列表标签

无序列表

    <ul>
        <li>列表项1</li>
        <li>列表项1</li>
        <li>列表项1</li>
        ...
    </ul>

<ul></ul>里面只允许放<li></li>标签

<li></li>里面可以放其它标签，相当于一个容器，可以容纳所有元素

有序列表

    <ol>
        <li>锅包肉</li>
        <li>糖醋排骨</li>
        <li>烧鸡</li>
    </ol>

其注意事项与无序列表类似

自定义列表

<dl></dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用

    <dl>
        <dt>名词1</dt>
        <dd>名词1解释1</dd>
        <dd>名词1解释2</dd>
    </dl>

1.<dl></dl>里面只能包含<dt>和<dd>

2.<dt>和<dd>没有个数限制，经常是一个<dt>对应多个<dd>

12.表单标签

在HTML中，一个完整的表单通常用表单域、表单控件（也称表单元素）和提示信息3个部分构成

表单域

表单域是一个包含表单元素的区域

<form></form>标签用于定义表单域，会把它范围内的表单元素提交给服务器

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

表单控件（表单元素）

1.<input>表单元素

<input type="属性值">

type属性的属性值
属性值	描述
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被隐藏
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务端
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

点击了提交按钮，可以把表单域form 里面的表单元素里面的值提交给后台服务器

除type属性外，<input>还有其它很多属性

属性属性值描述
name 由用户自定义定义input元素的名称
value 由用户自定义规定input元素的值
checked checked 规定此input元素首次加载时应当被选中
maxlength 正整数规定输入字段中字符的最大长度

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中字符的最大长度

1.name和value是每个表单元素都有的属性值，主要给后台人员使用

2.name表单元素的名字，要求单选按钮和复选框要有相同的name值

3.输入提示文字最好使用placeholder，颜色比较淡，且输入数据就会消失

<label>标签为input元素定义标注（标签）

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

<label for="sex">男</label>

<input type="radio" name="sex" id="sex"/>

2.select下拉表单元素

<select>中至少包含一对<option>

在<option>中定义selected="selected"时，当前项即为默认选中项

    <select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        ...
    </select>

3.textarea文本域元素

<textarea>可用于定义多行输入数据

rows，col一般不用，后期会用css

        <textarea rows="3" cols="20">
            文本内容
        </textarea>

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
</head>
<body>
        <h4>青春不常在，抓紧谈恋爱</h4>

        <table width="500">
            <tr>
                <td>性别</td>
                <td><label for="nan">男</label> <input type="radio" name="sex" id="nan" checked="checked">
                    <label for="nv">女</label> <input type="radio" name="sex" id="nv"></td> <br>
            </tr>

            <tr>
                <td>生日</td>
                <td>
                    <select>
                        <option selected="selected">--请选择年--</option>
                        <option>2002</option>
                        <option>2003</option>
                        <option>2004</option>
                    </select>
                    <select>
                        <option selected="selected">--请选择月--</option>
                        <option>1月</option>
                        <option>2月</option>
                        <option>3月</option>
                    </select>
                    <select>
                        <option selected="selected">--请选择日--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>所在地区</td>
                <td>
                    <input type="text" value="北京思密达">
                </td>
            </tr>

            <tr>
                <td>婚姻状况</td>
                <td>
                    <label for="weihun">未婚</label> <input type="radio" name="marry" id="weihun" checked="checked">
                    <label for="yihun">已婚</label> <input type="radio" name="marry" id="yihun">
                    <label for="lihun">离婚</label> <input type="radio" name="marry" id="lihun">
                </td>
            </tr>

            <tr>
                <td>学历</td>
                <td><input type="text" value="幼儿园"></td>
            </tr>

            <tr>
                <td>喜欢的类型</td>
                <td>
                    <label for="wumei">妩媚的</label> <input type="checkbox" name="like" id="wumei">
                    <label for="keai">可爱的</label> <input type="checkbox" name="like" id="keai">
                    <label for="xiao">小鲜肉</label> <input type="checkbox" name="like" id="xiao">
                </td>
            </tr>

            <tr>
                <td>自我介绍</td>
                <td>
                    <textarea>自我介绍</textarea>
                </td>
            </tr>

            <tr>
                <td></td>
                <td><input type="submit" value="免费注册"></td>
            </tr>

            <tr>
                <td></td>
                <td><input type="radio" checked="checked">我同意注册条款和会员加入标准</td>
            </tr>

            <tr>
                <td></td>
                <td><a href="#" target="_blank">我是会员，立即登录</a></td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <h3>我承诺</h3>
                    <ul>
                        <li>年满18岁，单身</li>
                        <li>报着严肃的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>
                </td>
            </tr>
            
        </table>

</body>
</html>

运行结果：