HTML

最新推荐文章于 2025-01-12 22:28:07 发布

原创最新推荐文章于 2025-01-12 22:28:07 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了HTML的基本语法，包括文档类型声明、标签使用、注释、文本格式化、图像、链接、列表、表格、表单等元素的使用方法，适合初学者入门。

HTML基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Title</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>告诉浏览器使用什么规范，现在使用HTML5去掉也没关系。
HTML注释<!-- 里面写内容-->
<html lang="en">  </html> HTML中的内容写入
<head>头部
<title>Title</title>网站标题
<meta charset="UTF-8"> 描述性标签，描述网站的一些信息，一边拿用来做SEO
<body></body>中填写主要内容
<h1></h1>标题标签一级
<h2></h2>二级标签等等
<p></p>段落标签   每段有一定距离
<br/>换行标签换行，每行紧凑

<hr>加一条横线

粗体<strong></strong>
斜体<em></em>
特殊符号
&nbsp;是空格
 &gt;大于
&lt;小于
&copy版权符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>是一个标题</title>
</head>
<body>
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题&nbsp;&nbsp;&nbsp;&nbsp;有几个空格</h2>下面有横线
<hr>
这里会换行<br>
这里会换行<br>
这里会换行<br>
<p>这里换段落</p>
<em><p>这里换段落斜体</p></em>
<strong><p>这里换段落粗体</p></strong>
</body>
</html>

img标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<img src="../../../Aurora-4k.jpg" alt="一个图片未加载"width="50"height="50"title="鼠标悬停会有文字">

</body>
</html>

链接标签

<a herf="跳转到哪里"></a>

锚标签
<a name="top">顶部</a>使用name做为标记
然后使用
<a href="#top">跳转</a>
跳转到标记#标记名字
功能性链接
邮件链接mailto

块元素和行内元素

块元素：无论内容多少，该元素独占一行。换行
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行。不会换行

列表

无序列表

<ul>
<li>内容</li>
</ul>

<ul><li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    </ul>

有序列表

<ol>
<li>内容</li>
</ol>

<ol><li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li></ol>

自定义列表

<dl>
<dt>靠左</dt>
<dd>靠右</dd>
</dl>

<dl>
    <dt>学科</dt>
        <dd>语文</dd>
        <dd>数学</dd>
        <dd>英语</dd>
        <dd>政治</dd>
</dl>

表格

行tr
列td

<table border="1px">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

一行三列 table border="1px"加边框

跨列<td colspan=" 跨几列">
跨行<td rowspan="跨几行">

表格

学生成绩
xx	语文	100
xx	数学	100
xxx	语文	100
xxx	数学	100

视频音频

video

<video src="../video/同周共技.mp4" controls autoplay></video>

controls：控制条
autoplay：自动播放

audio

controls：控制条
autoplay：自动播放

iframe内联框架

width=" 数字px" height="数字px" 在自己的网站显示一些引用东西

<iframe src="http://www.baidu.com" frameborder="0" height="1000px"width="1000px" name="xxx"></iframe>
<a href="TEST1.html" target="xxx">点击即可跳转</a>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>
<form action="表格.html" method="get">
    <!--get方式提交：我们可以在url中直接看到提交的信息，不安全，高效
     post方式提交：比较安全，传数大文件
     size=""文本框长度
     value默认初试值
     maxlength=""最长能写几个字符
     表单必须有 input type name
readonly只读
     -->
    <p>
     名字: <input type="text" name="username" readonly><!--文本输入框-->
    </p>
    <p>
        密码：<input type="password"name="password"></p>
    <!--单选框标签
    input type="radio"
    value:单选框的值 会把value的值提交
    name:表示组
    -->
    <p>
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
    <!--多选框
    -->
    <p>
        爱好 <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="study" name="hobby">学习
        <input type="checkbox" value="game" name="hobby">打游戏
        <input type="checkbox" value="stu" name="hobby" checked>敲代码<!--checked默认选中-->
    </p>
    <p>
        <input type="button"name="btn1" value="点击"><!--普通按钮点击无作用 -->
       <!-- <input type="image" src="../video/Aurora-1080.jpg" name="aaa"><!--图片按钮点击可以提交 -->
    </p>
<!--下拉框-->
    <p>
        <select name="列表名字" id="">
            <option value="选项的值">中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值" selected>瑞士</option> <!--selected默认 -->
            <option value="选项的值">印度</option>
        </select>
    </p>
<!--文本域-->
    <p>
        <textarea name="textarea" cols="50" rows="10" >文本内容</textarea>

    </p>
<!--文件域  -->
    <input type="file" name="files" >
    <input type="button" value="上传" name="uploda" >
    <p>
        <input type="submit" disabled><!--提交  不能提交--> <input type="reset"><!--重置按钮-->
    </p>
</form>
</body>
</html>

只读readonly
隐藏hidden
禁用disabled
label for=" id内容"增强鼠标可用性点击到某个文本域
placeholer=" 提示信息"提示在文本框中的提示信息
required里面元素不能为空
pattern 输入正则表达式判断