HTML基础

发表于 2023-05-12 本文字数 5.1k 字阅读时长 5 分钟

# 百度前端（一）HTML

# HTML 语法规范

<!DOCTYPE html>  <!-- 当前网页使用的协议为HTML-->
<html lang="en">  <!--网站语言为 中文zh-CN-->
    <head>
<!--    meta 描述性标签，用来描述网页的一些信息-->
<!--    meta一般用来做SEO (搜索引擎优化)-->
    <meta charset="UTF-8"> <!--全国码-->
    <meta name="keywords" content="养猪专业户,养猪大厂"> <!--网页关键词-->
    <meta name="description" content="来这个地方养猪">	<!--网页描述-->
  	<title>HTML学习</title>		<!--title标签表示网页标题-->
    </head>
    <body>	
        网页内容
    </body>
</html>

# HTML 常用标签

1. 标题标签	<h1></h1>…<h6></h6>	字体大小逐级递减
2. 段落标签	<p></p>	分段，文本内容
3. 换行标签	<br>	单标签，遇到 br 换行
4. 语义标签	<b></b>。<i></i>。<s></s>。<u></u> 对应 <strong>。<em>。<del>。<ins>	加粗倾斜删除下划线
5. 布局标签	<div></div> <span></span>	div 独占一行 span 占小块
6. 图像标签	<img src=“C:\003.jpg” height=100 title=“学习用… border=10”>	alt: 图片加载失败显示 title: 鼠标指向时显示 border: 边框粗细
7. 链接标签	<a href=“跳转目标” target=“弹出方式”> 链接宿主文本或图像 </a>	target：要么当前页面弹出，要么新开页面 href 外部链接：如 https://www.meituan.com 内部链接：href=“xxx.”
8. 表格标签	<table></table> <th>…</th> 定义表头单元格 <tr>…</tr> 定义一行标签 <td>…</td> 定义单元格标签	colspan 属性跨行 rowspan 跨列

1. 特殊符号

7. 链接标签补充：

a. 外部链接：如 https://baidu.com
b. 内部链接：href=“xxx.html” 跳转到自己制作的 html
c. 空连接：# href=“#”
d. 下载链接：href=“一个压缩包或文件的地址” 则会下载这个文件 (.zip、.doc…)
e. 锚点链接：某个标签内加入 id=“ID_name” 添加锚点，链接 href=“#ID_name”, 该链接用于跳转到锚点

# HTML5 语义标签

<nav>
<header>
<article>
<section>
<aside>
<footer>

# * 表单

查看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h2>登录注册</h2>
<!--表单-->
<!--
input

1.action:表单提交的位置，可以是网站，也可以是一个请求处理地址 <br>
2.method (提交方式): post / get <br>
      get方式提交：    我们可以在url中看见我们提交的信息，不安全,高效。
      post方式提交：   比较安全，可以传输大文件。
3.value:      默认初始值
4.size:       文本框的长度
5.maxlenth:   最长能写几个字符

-------------type---------
submit: 提交
reset：重置
radio: 选项 (需要name命名 相同name分为一组 才可以多选一)

form表单内-->

<form action="1.我的第一个网页.html" method="get">
<!-- 账号  input type="text"-&ndash;&gt; -->
<p>QQ：<input type="text" name="username" placeholder="请输入用户名" maxlength="10"></p>
<p>密码：<input type="password" placeholder="输入你的密码" name="password"></p>
<p>性别：
    <input type="radio" value="boy" name="sex" checked>男
    <input type="radio" value="girl" name="sex">女
</p>
    <p>
<!--        加入 checked  代表默认选中-->
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="game" name="hobby">打游戏xd
        <input type="checkbox" value="eat" name="hobby">吃
        <input type="checkbox" value="code" name="hobby" checked>写代码
    </p>

<!--  button按钮-->
    <p>
        <input type="button" name="btnl" value="点击变大">
        <input type="image" src="../../resources/image/1.jpg" width="60" height="60" value="点击变小">
    </p>
    <p>国家
        <select name="country">
<!--            加入 selected  代表默认选中-->
            <option value="China" selected>中国</option>
            <option value="America">美国</option>
            <option value="Switzerland">瑞士</option>
        </select>
    </p>

<!--    文本域-->
<p>反馈：
    <br>
    <textarea name="textarea" cols="30" rows="10" title="retrun">  </textarea>
</p>
<!--    文件域-->
    <p>
        <input type="file" value="选择文件">
    </p>

<p> 邮箱
<!--    email邮箱验证-->
    <input type="email" name="email">
</p>
    <p>URL
<!--        URL验证-->
        <input type="url" name="url">
    </p>
    <p>商品数量
<!--        number数字验证-->
        <input type="number" name="num" min="0" max="100">
    </p>
    <p>
<!--        range滑块-->
        音量：
        <input type="range" name="voice" min="0" max="100">
    </p>
    <p>
<!--        搜索框-->
        搜索：
        <input type="search" name="search">
    </p>
<p>
<!--    增强鼠标可用性-->
    <label for="mark">|你点我试试|</label>
    <input type="text" id="mark" name="123">

</p>
    <p>只读
        <input type="text" size="20px" value="呜呜呜" readonly>
    </p>
<p>自定义验证
    <input type="myemail" pattern="填入正则表达式">


</p>
    <footer>
        <p>
            <input type="submit">
            <input type="reset">
        </p>
    </footer>
</form>
</body>
</html>

html