HTML入门

最新推荐文章于 2023-06-08 22:12:06 发布

xuxiaojiua

最新推荐文章于 2023-06-08 22:12:06 发布

阅读量67

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/xuxiaojiua/article/details/119519405

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML知识总结

超文本标记语言【Hyper Text Markup Language】

<!-- 注释信息 -->

实体符号

&lt;	小于号
&gt;	大于号
&nbsp;	空格

1、网页基本信息

<!--【!DOCTYPE】告诉浏览器要使用的规范-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--meta：描述性标签，用来描述网站一些信息-->
    <meta charset="UTF-8">
    <meta name="keywords" content="xuxiaojiua的博客">
    <meta name="description" content="是一个java学习的笔记">
    <title>Title</title>
</head>
<body>
Hello World!
</body>
</html>

2、网页基本标签

2.1 标题标签

<h1>一级标题</h1>
<h3>三级标题</h3>
<h6>六级标题</h6>

2.2 换行

<br/>

2.3 下划线

<hr/>

2.4 段落

<p>一段文字</p>

2.5 字体

<font color="" size="">字体标签</font>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<strong>粗体字</strong>
<i>斜体字</i>
<em>斜体字</em>

3、常用标签

3.1 图片标签

<img src= "图片资源地址" alt="图片加载失败显示的信息" title="鼠标在图片上悬停显示">

3.2 超链接标签

<a href="链接路径" target="_self">一条超链接</a>
<!--target属性：新页面打开的位置
				_self		在当前窗口打开
			   	_top	  	在顶级窗口
			   	_blank 		在一个新窗口
			   	_parent		在父窗口打开
-->

<!--锚链接-->
<a name="一个地址"></a>
<a href="#一个地址"></a>

3.3 列表

无序列表

<ul>
    <li></li>
    <li></li>
</ul>

有序列表

<ol>
    <li></li>
    <li></li>
</ol>

自定义列表

<dl>标签
    <dt>列表</dt>
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
</dl>

3.4 表格

<table>
    <tr>
        <td>列</td>
        <td>列</td>
        <td>列</td>
    </tr>
    <tr>行table rows
        <td>列</td>
        <td>列</td>
        <td>列</td>
    </tr>
</table>

单元格合并

<td colspan="2">两列合并</td>
<td rowspan="2">两行合并</td>

3.5 媒体元素

controls：控制条

autoplay：自动播放

<video href="" controls autoplay></video>
<autio href="" controls autoplay></autio>

3.6 页面结构

<body>
    <header>网页头部</header>
    <nav>导航类辅助内容</nav>
    <footer>网页脚部</footer>
</body>

3.7 内联框架

一个网页中嵌入另一个网页

<iframe src="地址"></iframe>

3.8 form表单

readonly只读，不能更改

disabled禁用

hidden隐藏，用户看不到，仍然能提交

<form action="要提交到的地址" method="post|get">
    <input type="text" name="xx"/>
    
    <!--单选框，name相同，表示同一个组-->
    <input type="radio" name="sex" value="boy"/>男
    <input type="radio" name="sex" value="girl"/>女
    
    <!--多选框,没有value不能提交-->
    <input type="checkbox" name="hobby" value="song"/>唱歌
    <input type="checkbox" name="hobby" value="game"/>游戏
    
    <!--按钮-->
    <input type="button" name="btn1" value="点击按钮"/>
    <input type="submit" value="提交按钮"/>
    <input type="reset" value="重置表单"/>
    
    <!--文件提交-->
    <input type="file" name="file"/>
    
    <!--滑块-->
    <input type="range" name="xx" min="0" max="100"/>
    
    <!--搜索框-->
    <input type="search" name="search"/>
</form>

3.9 下拉菜单

下拉菜单：
<select name="列表名称">
    <option value="zh">中国</option>
    <option value="us">美国</option>
</select>

3.10 文本域

<textarea name="textarea" rows="10" cols="20"></textarea>

3.11 初级表单验证

plaseholder：提示信息，用户输入之后就不显示了

required：要求必须填写，不能为空

<input type="text" name="xx"  plaseholder="请输入xxx" required/>

pattern：正则表达式验证

xuxiaojiua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门

HTML知识总结超文本标记语言【Hyper Text Markup Language】实体符号&lt; 小于号&gt; 大于号&nbsp; 空格1、网页基本信息<!DOCTYPE html><html lang="en"><head> 
复制链接

扫一扫

专栏目录