HTML学习笔记

最新推荐文章于 2023-01-12 15:14:08 发布

like_eat_apple

最新推荐文章于 2023-01-12 15:14:08 发布

阅读量304

点赞数

分类专栏：学习笔记文章标签： html学习笔记

本文链接：https://blog.csdn.net/like_eat_apple/article/details/53157693

版权

学习笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

HTML

1.简介

HyperText Mark-up Language ，超文本标记型语言，网页语言
实质上是文本，只是被标签修饰而显示不同的效果

<font color="red" size="5">第一个html程序 </font>

2.规范

以标签开始,以标签结束
包含head和body

<html>
    <head>设置信息</head>
    <body>显示的内容</body>
</html>

不区分大小写
没有结束标签，就在标签内结束

<br/>

3.理解标签

标签包裹数据
改变标签的属性值来实现数据的各种显示效果

4.常用标签

1.文字标签

<font color="设置文字颜色" size="文字的大小">要操作的内容</font>

color设置颜色：
第一种：英文单词red green yellow……
第二种：十六进制数字 #ffffff
第三种：rgb(255,0,0)
size：设置大小
取值范围：1-7

2.标题标签

<h1></h1> 
<h2></h2>
.......
<h6></h6>

<hr/>
<!-- 注释的内容  -->
&nbsp;

3.列表标签

自定义
<dl>
    <dt>定义上层内容</dt>
    <dd>定义下层内容</dd>
    <dd>定义下层内容</dd>
</dl>
有序
<ol type="i">
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
</ol>
无序
<ul type="circle">
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>       
</ul>

4.图形标签

<img src="图像的位置" width="300" height="300" border="1"  alt="图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本" title="鼠标滑过图片时显示的文本"/>

5.超链接标签

<a href="链接地址" target="_blank"></a>

6.表格标签

<table border="0" bordercolor="red" cellspacing="5" cellpadding="10" width="100" height="50" align="center">
    <!--行-->
    <tr>
         <!--单元格-->
         <td></td>
         <td></td>
         <td></td>
    </tr>
    <tr>
         <td></td>
         <td></td>
         <td></td>
    </tr>
</table>

在tr标签里面也可以表示单元格<th></th>实现居中和加粗的效果
合并单元格
rowspan：跨行
<td rowspan="4">人员信息3人</td>
colspan：跨列
<td colspan="3">统计信息3人</td>
表格标题
<caption>标题内容</caption>

7.表单标签

把输入的数据提交到服务器上，这个过程称为表单
使用表单标签实现数据提交到服务器上这个过程

<form action="提交的地址" method="get或post">
    <!--文本-->
    <input type="text"/>
    <!--密码-->
    <input type="password"/>
    <!--单选-->
    <input type="radio"/>
    <!--多选-->
    <input type="checkbox"/>
    <!--隐藏-->
    <input type="hidden"/>
    <!--普通按钮-->
    <input type="button" value="按钮显示的内容"/>
    <!--提交按钮-->
    <input type="submit"/>
    <!--下拉选择-->
    <select>
        <option>AAAA</option>
        <option>BBBB</option>
        <option>CCCC</option>
    </select>
    <!--文本域-->
    <textarea cols="10" rows="5"></textarea>
    <!--重置-->
    <input type="reset"/>
    <!--图片提交-->
    <input type="image" src="图片路径"/>
</form>

输入项要有name属性,同一组的单选按钮，name取值要一致
单选、多选、下拉选择项里要有value属性
单选多选：默认选中使用 checked=”checked”
下拉选择：默认选中用 selected=”selected”

8.其他的标签

<!--原样输出-->
<pre></pre>
<!--段落-->
<p></p>
<!--删除线--> 
<s></s>
<!--下划线-->
<u></u>
<!--加粗-->
<b></b>
<!--斜体-->
<i></i>

<!--自动换行-->
<div>
<!--在一行进行显示-->
<span>

如果单元格里面没有内容，使用占位符替代
想要一个超链接没有效果，在href属性值写成#

like_eat_apple

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

HTML：HyperText Mark-up Language ，超文本标记型语言，网页语言实质上是文本，只是被标签修饰而显示不同的效果
复制链接

扫一扫

专栏目录

HTML学习笔记

HTML

1.简介

2.规范

3.理解标签

4.常用标签

1.文字标签

2.标题标签

3.列表标签

4.图形标签

5.超链接标签

6.表格标签

7.表单标签

8.其他的标签

“相关推荐”对你有帮助么？