前端学习-html常用标签和结构

最新推荐文章于 2022-04-04 10:29:23 发布

Yan阿清

最新推荐文章于 2022-04-04 10:29:23 发布

阅读量249

点赞数 1

文章标签：前端学习 html

本文链接：https://blog.csdn.net/weixin_51346866/article/details/123213830

版权

一、标签：

1、段落

<p></p>

2、超链接

<a href="http://www.baudu.com" traget="_blank(新窗口打开网页)/_self(默认)" title="百度一下">点我试试</a>

3、插入图片

<img src="../images/1.jpg" alt="图片加载失败" title="鼠标悬停显示文本" width="宽" height="高"/>

4、容器div

<div></div>

5、表单合并：

colsapn 合并列→下一列注释掉
rowspan 合并行 →下一行注释掉

  <div class="box1">
        <p>合并行</p>
         <table border="1" cellspacing="0" width="399px" height="103px">
        <tr >
            <td rowspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
        </tr>
        </table>
    </div>

    <div class="box1">
        <p>合并列</p>
         <table border="1" cellspacing="0">
        <tr >
            <td ></td>
            <td ></td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
        </table>
    </div>

6、列表标签

<!--无序列表-->
<ul>
      <li></li>
      <li></li>
      <li></li>
</ul>
<!--有序列表-->
<Ol>
    <li></li>
    <li></li>
</Ol>
<!--自定义列表-->
<dl>
    <dt></dt>
    <dd></dd
    <dd></dd>
</dl>

7、注释(VScode)：

html：<!-- -->     
JS: 多行注释(shift+alt+A)  /* */      当行注释(ctrl+/)：//  
CSS: /**/

8、标题

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h4>
<h6></h6>

9、换行

<br>

10、水平线

<hr>

11、小段文本

<span></span>

12、i 、em 表示斜体

<i></i><em></em>

13、 b strong 表示粗体

<b></b><strong></strong>

14、 u 表示下划线

<u></u>

15、 s、del 表示删除线

<s></s><del></del>

16、form表单

<form action="" id="" method="get/post" name="表单名称">
    //文本框
    <input type="text" placeholder="占位符" value="" maxlength="">
    //密码框
    <input type="password">
    //单选框
    <input type="radio">
    //复选框
    <input type="checkbox" checked="checked" disable="disable">
    
    <input type="button" value="按钮">
    //重置按钮
    <input type="reset" value="重置">
    //提交按钮
    <input type="submit" value="提交">
    //下拉菜单
    <select>
        <option></option>
         <option></option>
    </select>
    
    //文本域
    <textarea></textarea>

 //新增
    <fieldset>
        <legend>
            文字旁边有线段
        </legend>
    </fieldset>
</form>

17、link标签

<link rel="stylesheet" href="外部样式表地址" type="text/css">

18、style标签 -内部样式表

<style>
	div{
	width:100px；
	height:100px；
	}
</style>

19、内嵌样式表

<p style:font-size="20px">
    12313231
</p>

20、表格

注：(tr：行  td：单元格)
<table border="1" cellspacing="0" cellpadding="">
    <tr>
    <td rowspan="合并行"></td>
    <td></td>
    </tr>
     <tr>
    <td colspan="合并列"></td>
    <td></td>
    </tr>
</table>

//竖排
<table>
	<tr>
    <th></th>
    <td></td>
    </tr>   
    	<tr>
    <th></th>
    <td></td>
    </tr>   
</table>

二、完整网页结构（笔记）

<!-- 声明文档类型 -->
<!DOCTYPE html>

<!-- 语言为英语 -->
<html lang="en">

    <!-- 头部 -->
<head>
    <!-- 编码 -->
    <meta charset="UTF-8">
    <!-- 浏览器 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 窗口  initial-scale初始缩放比例 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页标题 -->
    <title>Note day01</title>
<!-- link引用外部样式表 或者小图标 -->
    <link rel="icon" href="../images/gyy.png" type="image/x-icon">

    <!-- 样式 -->
    <style>
        h2{
            color: gold;
        }
        h3{
            color: aqua;
        }

        p{
            font-size: 20px;
            color: black;
        }

    </style>
</head>

<!-- body 放文本,图片,啥都放 -->
<body>
   <h2>2022/2/8 </h2>
    <div>

        <div>
            <h3>总流程</h3>
            <p>域名注册-分配空间(服务器)- 搭建网(网页)- 推广维护</p>
        </div>
        
        <div>
            <h3>准备工作</h3>
           <span>安装VScode编辑器、chrome浏览器</span>
           <p> 1、VScode 新建操作- 感叹号+回车! </p>
           <p>2、代码格式 结构</p>
           <p>3、浏览器 F12查看网页源码 熟悉控制器</p>
           <p>4、切图 ps 切片工具 CTRL+c  CTRL+N新建图层   Ctrl+V</p>
        </div>

        <div>
            <div>
                <h3>有关组织</h3>
                <p>1、w3c 万维网联盟(1994)   ECMA欧洲电脑网商联盟-指定行为标准</p>
                <p>2、web标准 :w3c→网页组成:行为(JS DOM)、  ECMA →表现(css)、结构(xhtml、xml)</p>
            </div>
        </div>
        
        <div>
            <h3>命名规范</h3>
            <p>  1、小写英文字母、数字、下划线的组合;
                 2、其中不得包含汉字、空格和特殊字符;
                 3、必须以英文字母开头。</p>
        </div>
        <div>
            <h2>html 语法1</h2>
            <p>标签:写在尖角号<>里的第一个单词，叫做标记，也叫做标签，也称作元素；</p>

            <p> 语法:标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内
                一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后顺序</p>
        </div>
        <div>
            <h2>HTML语法2 不严谨</h2>
            <!-- 双标记<p></p> -->
            <p>单标记</p>
            <img src="../images/gyy.png" alt="加载失败的文本" title="高圆圆" width="300px" height="300px" />
            <p>双标记</p>
            <a href="http://www.baidu.com">点我试试</a>
        </div>
        <div>
            <h2>常用标签</h2>

            <p>文本标题 h1-h6 </p>
            <!-- h$*6{文本标题$}+回车 -->
            <p>h1唯一</p>
            <h1>文本标题</h1>
            <h2>文本标题</h2>
            <h3>文本标题</h3>
            <h4>文本标题</h4>
            <h5>文本标题</h5>
            <h6>文本标题</h6>

            <p> i和en表示 <i>倾斜 </i>   b和strong表示 <b>加粗</b> </p>
            <u>u 表示下划线</u>
            <del>s、del 删除线</del>

            <br/>
            <p>br 另起一行（换行）</p>
            <hr/><p>hr 水平线</p>

            <p>sup 平方上标</p>
            <p>80m<sup>2</sup></p>

            <p>sub平方下标  水的方程式;H<sub>2</sub>O</p>

            <p>小段文本 span</p>
            <p>123114<span style="color: aqua;">424</span>12</p>

            <h3>转义字符:</h3>
            &nbsp;&nbsp;<p>"& nbsp;"空格</p>
            &copy;<p> "& copy;"版权符号</p>
            &yen;<P>"& yen;"人民币符号</P>

        </div>
        <div>
            <!-- ul>li*3 快捷 -->
            <h2>列表</h2>
            <P>无序列表</p>
            <ul>
                <li>adqwd</li>
                <li>adadsd</li>
                <li>test</li>
            </ul>

            <P>有序列表</P>
            <ol>
                <li>dada</li>
                <li>xiix</li>
                <li>hhe</li>
            </ol>

            <p>自定义列表 </p> 
            <dl>
                <td>你好</td>
                <dd>嗯呢</dd>
                <dd>雷好</dd>
            </dl>
        </div>

        <div>
            <p>注释 html: < !-- -->  css: /* */   JS: //  多行注释/* */ </p>
        </div>

        <div>
            <h2>表格 tr是行 td是单元格内容</h2>
            <!-- 两行两列  colspan 合并列 rowspan 合并行-->
            <!-- table>tr*2>td*2 快捷 -->
            <table border="1" width="100px" height="50px" cellspacing="0" cellpadding="">
                <tr >
                    <td >1,1</td>
                    <td >1,2</td>
                </tr>
                <tr>
                    <td >2,1</td>
                    <td>2,2</td>
                </tr>
                <tr>
                    <td>3,1</td>
                    <td>3,2</td>
                </tr>

            </table>
        </div>
    </div>
</body>
</html>