html复习-CSDN博客

本文链接：https://blog.csdn.net/qq_41645342/article/details/112178624

html的初始代码

<!DOCTYPE html><!--文档声明-->
<html lang="en"><!--外层标签  ‘en’：英文  ‘zh-CN’:中文-->
<head><!--头-->
    <meta charset="UTF-8"><!--UTF-8国际编码-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><!--设置网页标题-->
</head>
<body>
    <!--网页身体-->
</body>
</html>

注释

<!-- 注释内容 -->

标题

<h1> </h1>  <h6> </h6> <!-- h1到h6 -->

段落

<p> </p>

文本修饰标签

<strong>加粗</strong>
<em>斜体</em>
<sub>下标</sub>    <sup>上标</sup>
<del>删除文本：删除线</del>    <ins>插入文本：下划线</ins>

图片标签

<img src="引用地址" alt="图片错误的错误提示信息" width="宽" height="高" title="提示信息">

引入文件的地址路径

<!--相对路径-->
	<img src="./img.jpg"> <!--同级文件-->
	<img src="../img.jpg"> <!--上一级文件-->
<!--绝对路径-->
	<img src="C:/img.jpg">

跳转链接

<a href="跳转链接" target="打开方式（_self:当前页跳转，默认,_blank:打开一个新的网页跳转）"></a>

<head>
    <base target="_blank"><!--为所有链接规定跳转目标-->
</head>

跳转锚点

<!--方法一:#id-->
	<a href="#html">html</a>
	<p id="html">html</p>
<!--方法二:#name-->
	<a href="#html">html</a>
    <a name='html'></a>

特殊字符

https://www.w3school.com.cn/tags/html_ref_symbols.html

无序列表

<ul type="样式"><!--列表外层容器-->
       <li><a href="#"><strong></strong></a></li><!--列表项-->
       <li></li>
</ul>

有序列表

<ol type="样式"><!--列表外层容器-->
       <li><a href="#"><strong></strong></a></li><!--列表项-->
       <li></li>
</ol>

定义列表

   <dl><!--列表外层容器-->
       <dd>HTML</dd><!-- 标题 -->
       <dt>超文本标记语言</dt><!-- 描述内容 -->
   </dl>

嵌套列表(无序、有序和定义列表都可以)

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

表格

    <table><!-- 表 -->
        <caption></caption><!-- 表标题 -->
        <tr><!-- 表行 -->
            <th></th><!-- 表头 -->
            <th></th>
        </tr>
        <tr>
            <td></td><!-- 表单元格 -->
            <td></td>
        </tr>
    </table>
    <!-- 语义化标签 <thead></thead><tbody></tbody><tfoot></tfoot> -->

表格属性

border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:（left,center,right）左右对齐方式
valign:(top,middle,botton)上下对齐方式

表单标签

<form action=""><!-- action跳转地址 -->
        <!-- type规定input类型 -->
        <!-- 输入框 --><input type="text" placeholder="">
        <!-- 密码框 --><input type="password"  placeholder="">
        <!-- 复选框 --><input type="checkbox" checked>1 <!-- checked为选中 -->
            <input type="checkbox" disabled>2 <!-- disabled为不可选 -->
            <input type="checkbox">3
        <!-- 单选框 --><input type="radio" name="gender">男 <!-- 相同name下为单选 -->
            <input type="radio" name="gender">女
        <!-- 提交按钮 --><input type="submit" value="提交">
        <!-- 重置按钮 --><input type="reset" value="重置">
<!-- 多行文本框 --><textarea cols="30" rows="10"></textarea>
        <!-- 选择框 --><select>
            <option selected disabled>请选择</option>
            <option>1</option>
            <option>2</option>
        </select>
        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender"id="woman"><label for="woman">女</label>   
</form>

div和span

 <!-- 需要css才能体现区别 -->
 <div>块元素</div>
 <span>行内元素</span>

html复习

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