前端：html简介

html简介

1.前端知识的简介

  1. 声明为HTML5文档。
  2. 、是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
  3. <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。
  4. <title>、</title>定义了网页标题，在浏览器标题栏显示。（修改一下title中的内容，然后看一下浏览器，你就会发现title是什么了）
  5. <body>、</body>之间的文本是可见的网页主体内容。

  6. 注意：对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 。

2.html注释

<!--注释内容--> #找到一行内容ctrl+/就能注释，注释的内容不会在网页上显示出来

3.head内常用标签

  • <title></title>：定义网页标题

  • <style></style>: 定义内部样式表

  • <script></script>:定义JS代码或引入外部JS文件

  • <link/>:引入外部样式表文件

  • <meta/>:定义网页原信息

  • Meta标签介绍： #作为了解内容

    • 元素可提供有关页面的元信息（meta-information）,针对搜索引擎和更新频度的描述和关键词。

    • 标签位于文档的头部，不包含任何内容。

    • 提供的信息是用户不可见的。

    　　meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

    　　1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

  • <!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> #如果把URL和后面的内容去掉，就是2秒钟刷新一次，这些内容了解一下就行
<!--指定文档的编码类型--> 
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微软的一个全新的浏览器,其实就是告诉IE浏览器，你按照最高标准来渲染我的页面，了解一下就可以啦

  • 2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

  • <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> #关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的
#SEO就是做这个的，就是怎么让你们公司的网站在别人搜索的时候能够靠前显示，不算那个花钱的，百度是充值的，你冲个20w，别人可能一天就给你点击完了，特别的贵
<meta name="description" content="xxxxxpythonxxx学习">  #是对这个文档的描述，在百度一些内容的页面上，f1

4.body内常用标签

不加标签的纯文字也是可以在body中写的
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p> #独占一个段落

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
按钮标签
<button>
    一个按钮
</button>

<!--换行-->
<br>

<!--水平线--><hr> #就是单独个一个水平线
每次加上一些内容，别忘了刷新一下页面，才能看到新添加的效果或者内容，其实上面这些标签很少用

p标签段落标签:p标签不能嵌套p标签
<p></p>

div标签独占一行 
<div></div>

span标签不独占一行，无其他效果
<span></span>

  • 1.标签分类

两类：
	内敛标签（行内标签）：不独占一行,内敛标签只能嵌套内敛标签  b\i\u\button\span
	块级标签（行外标签）：自己独占一行，可以嵌套内敛和某些块级标签 \h1-h6\p

  • div与span标签

    这两个标签是没有特别的样式的。
<div>xxxx</div>，但是这是两个标签最大的特点，可以通过CSS来控制，就像咱们画画一样，在一个白纸上画好，还是在一个报纸上画好啊，对不对。打开个网页通过f12看一下，就发现多数都是div和span。

　　　　div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
　　　　span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

　　　　块级元素与行内元素的区别：
　　　　所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
　　　　这两个元素是专门为定义CSS样式而生的。

  • ​ img标签

    <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

    　　　src的路径又分为两种：网上的一个图片路径和本地的一个相对图片路径

  • a标签

    所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
href属性指定目标网页地址。该地址可以有几种类型：

    绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
    相对URL - 指当前站点中确切的路径（href="index.htm"） #学django的时候会用的比较多
    锚URL - 指向页面中的锚（href="#top"），博客的目录经常用到，还可以跳转到 name属性为p1的a标签上，<a name='top'>xxx</a>

  target：

    _blank表示在新标签页中打开目标网页
    _self表示在当前标签页中打开目标网页

  1. 无序列表

    <ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性：

    disc（实心圆点，默认值）
    circle（空心圆圈）
    square（实心方块）
    none（无样式）

  2. 有序列表

    <ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性： start是从数字几开始

    1 数字列表，默认值
    A 大写字母
    a 小写字母
    Ⅰ大写罗马
    ⅰ小写罗马

  3. 标题列表（就像大纲一样，有一个层级效果）

    <dl>  <dt>标题1</dt>  <dd>内容1</dd>  <dt>标题2</dt>  <dd>内容1</dd>  <dd>内容2</dd></dl>

  • 3.表格标签

    表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
    　　表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
    　　表格的基本结构：

<table border='1'>  <thead> #标题部分  <tr> #一行    <th>序号</th> #一个单元格    <th>姓名</th>    <th>爱好</th>  </tr>  </thead>  <tbody> #内容部分  <tr> #一行    <td>1</td> #一个单元格    <td>Egon</td>    <td>杠娘</td>  </tr>  <tr>    <td>2</td>    <td>Yuan</td>    <td>日天</td>  </tr>  </tbody>        属性:    border: 表格边框.    cellpadding: 内边距 （内边框和内容的距离）    cellspacing: 外边距.（内外边框的距离）    width: 像素 百分比.（最好通过css来设置长宽）    rowspan: 单元格竖跨多少行    colspan: 单元格横跨多少列（即合并单元格）

其实标签又可以分为两类：1、展示给用户看的 2、获取用户输入内容的标签，刚才前面的这些标签都是展示内容用的

  • 4.特殊字符!

  • 5.input标签

    用户名<input type ="text">密码 <input type="password"><!--指定name单选框 圆的--><input type="radio" name="sex">男<input type="radio" name="sex">女<!--多选框 方的--><input type="checkbox" name="hobby">抽烟<input type="checkbox" name="hobby">喝酒<input type="checkbox" name="hobby">烫头属性说明:    name：表单提交时的“键”，注意和id的区别    value：表单提交时对应项的值        type="button", "reset", "submit"时，为按钮上显示的文本年内容        type="text","password","hidden"时，为输入框的初始值        type="checkbox", "radio", "file"，为输入相关联的值    checked：radio和checkbox默认被选中的项    readonly：text和password设置只读,针对的只是输入框 text,password    disabled：所有input均适用	设置了readonly的标签，它的数据可以被提交到后台，设置了disable的数据是不能提交到后台的

    效果如下：

  • 6.form表单标签

    功能：

    　　　　表单用于向服务器传输数据，从而实现用户与Web服务器的交互

    　　　　表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

    　　　　表单还可以包含textarea、select、fieldset和 label标签。

表单元素　　　　基本概念：　　　　HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。　　　　表单一般用来收集用户的输入信息　　　　表单工作原理：　　　　访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。　　　　服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。

action:指定数据提交的路径input:	type属性：控制输入框的样式	name属性：分组，携带数据的key，  key:value	value:选择框提交数据时的值，输入框的默认值<form action="http//127.0.0.1:8000">    用户名<input type ="text" name="uname">    密码 <input type="password" name="pwd">        <!--指定name单选框 圆的-->    <input type="radio" name="sex" value="1">男    <input type="radio" name="sex" value='2' checked="checked">女 <!--checked="checked默认选择-->        <!--多选框 方的-->    <input type="checkbox" name="hobby" value="a">抽烟    <input type="checkbox" name="hobby" value="b">喝酒    <input type="checkbox" name="hobby" value="c">烫头    <input type="submit" value="提交"> <!--将数据提交到后台-->    <button>提交按钮</button>  <!--在form中与上列submit等效,在form表单外是不同的效果--></form>点击提交按钮，input中type=submit的那个按钮，然后就会将form表单中所有用户输入的内容或者选择的内容（{name属性:值，}）都发给服务端（以我们自己写的那个socket举例，打印一下接收的内容），但是所有的输入标签必须有一个叫做name的属性。

  • 7.select标签

    select下拉标签，option设置下拉标签里面的选项

<form action="" method="post">  <select name="city" id="city">    <option value="1">北京</option>    <option selected="selected" value="2">上海</option> #默认选中，当属性和值相同时，可以简写一个selected就行了    <option value="3">广州</option>     <option value="4">深圳</option>  </select></form>属性说明：    multiple：布尔属性，设置后为多选下拉框，否则默认单选    disabled：禁用    selected：默认选中该项    value：定义提交时的选项值

  • 8.label标签

    定义：

    如果不用这个label给input标签一个标记，input会变黄，不影响使用，只是提示你，别忘了给用户一些提示，也就是这个label标签。
    　说明：

    1. label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容
<form action="">  <label for="username">用户名</label>  #for和input的id属性一样，就关联在一起了  <input type="text" id="username" name="username"></form>

  • 9.textarea标签

    <textarea name="memo" id="memo" cols="30" rows="10">  默认内容</textarea>属性说明：    name：名称    rows：行数  #相当于文本框高度设置    cols：列数   #相当于文本框长度设置    disabled：禁用    maxlength：显示字符数，例如：maxlength='10'  最多输入十个字符
posted @ 2022-01-06 16:23  凡间小王  阅读(280)  评论(0)    收藏  举报