HTML百度百科:
HTML称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
而我总结HTML用于搭建基础网页,展示网页内容

  • html后缀名为htm或html
  • 标签分为:
  • 围堵标签:有开始和结束的标签:如
  • 自闭和标签:即开始标签和结束标签在一起(

    *标签可以嵌套:即一个标签在另一个标签里面(,即html标签嵌套了head标签)
  • 在开始标签可以定义属性,属性有键值对组成,值需要用引号引起来(单双引号都可)(打)
  • HTML标签不区分大小写
  • html的注释方式是

HTML的基础标签

  • 文件标签
  • html文档的根标签

* <br/>换行标签
     *h1-h6都是标题标签:h1到h6标签字体都加粗,但是字体字号逐渐变小,该标签自带换行<h1>"标题"</h1>
     * <p></p>是段落标签
     * <p>
     *     fhfsidi<!--在p标签中的内容会被当成一段>
     * </p>
     * <hr/>展示一条水平线在该标签里可添加一些属性,来自定义水平线(width(宽度),size(厚度),color,align(对其方式有(向左对齐)left,right,center))
     * <b></b>字体加粗
     * <i><i/>字体斜体
     * <font></font>字体标签(通过其属性自定义字体如color,字号(size),字体(face如楷体))
     * <center></center>居中标签
     * color可通过调色合成即color=“#00ffff”三种植分别是红绿蓝的占比从00-ff(十六进制)
     * width(可直接写200(即200个像素,一个像素就是一个小点或50%即与屏幕占比50%))
     * 实现空格的字符:( )
  • 图片标签:
* <img/>可以在该标签中添加图片路径及其属性
     * (<img src="1.jpg(图片的路径,建议把图片放在与HTML文件相同的目录下) width="500" height="300" alt(当图片没加载出来或者路径错了就会显示的文本信息)="家" align="right"/>)
     * 一般图片路径是相对路径:./代表是当前目录,../代表上一级目录("../s/1.jpg"s目录为与图片所在目录同级,所以要退回上一级目录),若不写任何字符,如1.jpg代表默认是当前目录
 * 列表标签:
     * <ol><ol/>:表示有序列表,其中包含着许多由列表项标签<li><li/>包裹着的列表项
     * <ol type="a" start="3">type代表为列表标识符是(type默认是从1,start默认从1开始)根据字母排序从第三个c开始
     * (结果是c.吃饭
     *         d.睡觉
     *         e.打豆豆
     * )
     *     <li>吃饭<li/>
     *     <li> 睡觉<li/>
     *     <li> 打豆豆<li/>
     *     <ol/>
     * <ul><ul/> 表示无序列表(它的常用type是disc(默认,实心圆点),square(方块),circle(圆圈))
 * **超链接标签**
     * <a href="https://www.baidu.com" target="_self">点击</a>
     * <a href="sds.html" target="_blank">点击</a>这是本地资源的超链接方式
     * 在该标签中写属性href表示url(定位符)即路径网址,target="_self(默认)表示在本页面跳转到该网址target="_blank表示在新建页面跳转到该网址"
     * <span>ffs</span>只起到包裹作用,不换行,只在一行,即写两个该标签,两个该标签的内容在同一行展示
     * <div>ffs</div>只起到包裹作用,换行,即写两个该标签,两个该标签的内容在不同行展示(z这两个标签与css常用)
  • 语义化标签
* :<header></header>//包裹开头(在看代码是表示这是开头)
     * <footer></footer>//包裹结尾(在看代码是表示这是结尾)
  • 表格标签:
* table:(属性:border:表格边框的像素点(border=“8 ”),)定义表格
     * tr:定义行(属性:bgcolor(背景色),align:文本位置,width,height)
     * td:定义单元格(
     * 属性:rowspan:合并行(合并的行算合并的行的第一行的行,即第一行与第二行合并那合并的行是第一行的单元格,若由3 列那第一行由3个单元格,而第二行只有2个单元格),colspan:合并列)
     * th:定义表头单元格(第一行的单元格)用该标签取包裹字体会变成粗体
     * caption:定义表格标题
 * 下面三者只起注释作用(语义化标签)
     * thead:表示表格的头部分,表示最先展示的一行,无论写在table里的那个位置
     * tbody:表示表格的体部分
     * tfoot:表示表格的脚部分,表示最后展示的一行,无论写在table里的那个位置
     * 若用table完成布局,可以在单元格中嵌套table
  • 表单标签:

*form:(属性:action:提交数据的url(一般提交到服务器,所以写服务器的路径,网址))用于定义表单,可以定义范围,范围代表用户的数据信息范围,被表单标签包裹的标签采集的数据会被提交到后台
*属性:method:指定提交方式(一共由7种,常用2种,get,post)

  • get与post的区别(面试重点)
    *get:请求信息会在地址栏中显示
  • 请求参数(即url)的长度大小有限制
  • 不太安全
  • post:请求信息不会再地址栏中显示,会封装再请求体中(HTTP协议)
  • 请求参数(即url)的长度大小没有限制
  • 比较安全
  • (属性:name,type,placeholder, value)
  • 默认是生成一个输入框,表单项中的数据要被提交,必须指定其name属性值

*input中type的取值:

  • text,(默认)即文本输入框
  • password(输入数据会被隐藏)
  • radio(单选框,但是只有两个input标签的name是一样的才能实现单选,要提交给服务器被选中的值可以用value进行赋值)
  • <input type="radio"name=“sex” value=“nan”/><input type="radio"name=“sex” value=“nv”/>
  • checkbox(多选框,同样name也应一样,要提交给服务器被选中的值可以用value进行赋值)
  • 要实现单选框或多选框的默认选中某一项,可在那一项的input标签加上checked=“check”(默认值)当然也可不赋值,直接写checked
  • file:可以选择图片或文件
  • hidden:隐藏域用于提交一些信息
  • submit:提交按钮,可以提交表单
  • button:只是一个按钮
  • image:图片按钮,图片提交按钮,,src指定图片的路径
  • color:生成取色器
  • date:只显示年月日的选择框
  • datetime-local:显示年月日时分秒
  • Email:在该输入框中要输入带有@的数据(即邮箱)
  • number:定义输入数字的字段
  • input的其他属性
* placeholder(提示信息,如点击输入框后该提示信息会消失)placeholder=“请输入用户名”
     *  name(框内要输的数据的名称)
     *  value(指定type内的值)
     *  <label>用户名</label>标签
     * 该标签属性有for,for的值与被包裹的文字对应的input标签的属性id的值是一样的,这样做当点击用户名区域,会让input输入框获取焦点
     * 例子<label for="user">用户名</label><input name="username"type="text" placeholder="请输入用户名" id="user"/>
***下拉列表*
 *<select></select>:定义下拉列表(必须给select添加name的属性值才能提交你选中的值)
 ***下拉列表项**
  <option></option>:定义下拉列表项(在该列表项中加selected,就表示被默认选中,可给列表项用value赋值,这样可传选中值给服务器)